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 //获取所有图片的div54 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 >1</div>84 <div >2</div>85 <div >3</div>86 <div >4</div>87 <div ><input type="button" value="我要抽奖" id="drawBtn"/></div>88 <div >5</div>89 <div >6</div>90 <div >7</div>91 <div >8</div>92 </div>93 </body>94 </html>
原标题：javascript跑马灯抽奖
关键词：JavaScript
我知道了 