快捷導(dǎo)航

javascript跑馬燈抽獎實(shí)例講解

更新時間：2020年04月17日 16:04:05 作者：和之韻律

這篇文章主要為大家介紹了javascript跑馬燈抽獎特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例講解了javascript跑馬燈抽獎特效，特別適合用于抽獎活動，分享給大家供大家參考，具體內(nèi)容如下

<!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");
  //獲得一個隨機(jī)整數(shù)，代表中獎的那個位置，3*8+(0-7)
  setting.total+=Math.floor(Math.random()*allDivs.length);
  //設(shè)置定時器，依次修改每個div邊框的顏色.
  setTimeout(function show(){
  //重置上一個邊框的顏色
  for (var i=0;i<allDivs.length;i++){
   allDivs[i].style.borderColor="#fff";
   allDivs[i].style.opacity=0.7;
  }
  //找到要修改的那個邊框的顏色設(shè)置
   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>

想要學(xué)習(xí)更多關(guān)于抽獎功能的實(shí)現(xiàn)，請參考此專題：抽獎功能

以上就是本文的詳細(xì)內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: