你的位置:首页 > Java教程

[Java教程]javascript跑马灯抽奖


 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>