1 2 3 4 5 抽獎游戲 6 39 80 81 82 83 184 285 386 487 88 589 690 791 892 93 94
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>抽獎游戲</title> 6 <style> 7 #box{ 8 width:720px; 9 margin:0 auto; 10 margin-top:20px; 11 box-shadow:0px 0px 2px #333; 12 } 13 .pic{ 14 width:200px; 15 height:200px; 16 float:left; 17 line-height:200px; 18 margin:10px; 19 border:5px #fff solid; 20 color:blue; 21 font-size: 35px; 22 text-align: center; 23 } 24 .anniu{ 25 width:200px; 26 height:200px; 27 float:left; 28 margin:10px; 29 } 30 #drawBtn{ 31 color:red; 32 font-size:30px; 33 width:200px; 34 height:200px; 35 box-shadow:0px 0px 2px #333; 36 font-weight: bold; 37 } 38 </style> 39 <script> 40 window.onload=init; 41 var setting={ 42 count:0, 43 total:24, 44 delay:20, 45 picIndex:[0,1,2,4,7,6,5,3] 46 } 47 function init(){ 48 document.getElementById("drawBtn").onclick=function(){ 49 setting.count=0; 50 setting.delay=20; 51 this.disable=true;//禁用按鈕 52 var drawBtn=this; 53 //獲取所有圖片的div 54 var allDivs=document.getElementsByClassName("pic"); 55 //獲得一個隨機整數，代表中獎的那個位置，3*8+(0-7) 56 setting.total+=Math.floor(Math.random()*allDivs.length); 57 //設置定時器，依次修改每個div邊框的顏色. 58 setTimeout(function show(){ 59 //重置上一個邊框的顏色 60 for (var i=0;i<allDivs.length;i++){ 61 allDivs[i].style.borderColor="#fff"; 62 allDivs[i].style.opacity=0.7; 63 } 64 //找到要修改的那個邊框的顏色設置 65 var currentPic=allDivs[setting.picIndex[setting.count%8]]; 66 currentPic.style.borderColor="red"; 67 currentPic.style.opacity=1.0; 68 setting.count++; 69 setting.delay+=2*setting.count; 70 if(setting.count>setting.total){ 71 alert("您中獎了，哈哈"); 72 drawBtn.disable=false; 73 return; 74 } 75 setTimeout(show,setting.delay); 76 },setting.delay); 77 } 78 } 79 </script> 80 </head> 81 <body> 82 <div id="box"> 83 <div class="pic">1</div> 84 <div class="pic">2</div> 85 <div class="pic">3</div> 86 <div class="pic">4</div> 87 <div class="anniu"><input type="button" value="我要抽獎" id="drawBtn"/></div> 88 <div class="pic">5</div> 89 <div class="pic">6</div> 90 <div class="pic">7</div> 91 <div class="pic">8</div> 92 </div> 93 </body> 94 </html>
