主页 / 网络编程 /

javascript跑马灯抽奖实例讲解

网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要为大家介绍了javascript跑马灯抽奖特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例讲解了javascript跑马灯抽奖特效，特别适合用于抽奖活动，分享给大家供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖游戏</title>
<style>
#box{
 width:720px;
 margin:0 auto;
 margin-: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");
  //获得一个随机整数，代表中奖的那个位置，38+(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+=2setting.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>

想要学习更多关于抽奖功能的实现，请参考此专题

以上就是本文的详细内容，希望对大家的学习有所帮助。

上一篇：小心！AngularJS结合RequireJS做文件合并压缩的那些 下一篇：jQuery页面刷新(局部、全部)问题分析

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by