javascript跑马灯抽奖实例讲解
本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0auto; margin-top:20px; box-shadow:0px0px2px#333; } .pic{ width:200px; height:200px; float:left; line-height:200px; margin:10px; border:5px#fffsolid; color:blue; font-size:35px; text-align:center; } .anniu{ width:200px; height:200px; float:left; margin:10px; } #drawBtn{ color:red; font-size:30px; width:200px; height:200px; box-shadow:0px0px2px#333; font-weight:bold; } </style> <script> window.onload=init; varsetting={ count:0, total:24, delay:20, picIndex:[0,1,2,4,7,6,5,3] } functioninit(){ document.getElementById("drawBtn").onclick=function(){ setting.count=0; setting.delay=20; this.disable=true;//禁用按钮 vardrawBtn=this; //获取所有图片的div varallDivs=document.getElementsByClassName("pic"); //获得一个随机整数,代表中奖的那个位置,3*8+(0-7) setting.total+=Math.floor(Math.random()*allDivs.length); //设置定时器,依次修改每个div边框的颜色. setTimeout(functionshow(){ //重置上一个边框的颜色 for(vari=0;i<allDivs.length;i++){ allDivs[i].style.borderColor="#fff"; allDivs[i].style.opacity=0.7; } //找到要修改的那个边框的颜色设置 varcurrentPic=allDivs[setting.picIndex[setting.count%8]]; currentPic.style.borderColor="red"; currentPic.style.opacity=1.0; setting.count++; setting.delay+=2*setting.count; if(setting.count>setting.total){ alert("您中奖了,哈哈"); drawBtn.disable=false; return; } setTimeout(show,setting.delay); },setting.delay); } } </script> </head> <body> <divid="box"> <divclass="pic">1</div> <divclass="pic">2</div> <divclass="pic">3</div> <divclass="pic">4</div> <divclass="anniu"><inputtype="button"value="我要抽奖"id="drawBtn"/></div> <divclass="pic">5</div> <divclass="pic">6</div> <divclass="pic">7</div> <divclass="pic">8</div> </div> </body> </html>
以上就是本文的详细内容,希望对大家的学习有所帮助。