本文實例講解了javascript跑馬燈抽獎特效，特別適合用于抽獎活動，分享給大家供大家參考，具體內容如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>抽獎游戲</title><style>#box{ width:720px; margin:0 auto; margin-top:20px; box-shadow:0px 0px 2px #333;}.pic{ width:200px; height:200px; float:left; line-height:200px; margin:10px; border:5px #fff solid; 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:0px 0px 2px #333; font-weight: bold;} </style> <script> window.onload=init; var setting={ count:0, total:24, delay:20, picIndex:[0,1,2,4,7,6,5,3] } function init(){ document.getElementById("drawBtn").onclick=function(){ setting.count=0; setting.delay=20; this.disable=true;//禁用按鈕 var drawBtn=this; //獲取所有圖片的div var allDivs=document.getElementsByClassName("pic"); //獲得一個隨機整數，代表中獎的那個位置，3*8+(0-7) setting.total+=Math.floor(Math.random()*allDivs.length); //設置定時器，依次修改每個div邊框的顏色. setTimeout(function show(){ //重置上一個邊框的顏色 for (var i=0;i<allDivs.length;i++){ allDivs[i].style.borderColor="#fff"; allDivs[i].style.opacity=0.7; } //找到要修改的那個邊框的顏色設置 var currentPic=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><div id="box"> <div class="pic">1</div> <div class="pic">2</div> <div class="pic">3</div> <div class="pic">4</div> <div class="anniu"><input type="button" value="我要抽獎" id="drawBtn"/></div> <div class="pic">5</div> <div class="pic">6</div> <div class="pic">7</div> <div class="pic">8</div></div></body></html>以上就是本文的詳細內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
