jquery实现抽奖功能

时间:2020-10-22 maxiaoxin1314 人气:0
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
  #lottery {
  width: 570px;
  height: 510px;
  margin: 0px auto;
  border: 4px solid #ba1809;
  }
 
  #lottery table {
  background-color: yellow;
  }
 
  #lottery table td {
  position: relative;
  width: 190px;
  height: 170px;
  text-align: center;
  color: #333;
  font-index: -999
  }
 
  #lottery table td img {
  display: block;
  width: 190px;
  height: 170px;
  }
 
  #lottery table td a {
  width: 190px;
  height: 170px;
  display: block;
  text-decoration: none;
  background: url(img/9.jpg) no-repeat top center;
  }
 
  #lottery table td a:hover {
  background-image: url(img/11.jpg);
  }
 
  #lottery table td.active .mask {
  display: block;
  }
 
  .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(252, 211, 4, 0.5);
  display: none;
  }
 </style>
 
 </head>
 <body>
 
 <div id="lottery">
  <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td class="lottery-unit lottery-unit-0">
   <img src="img/1.jpg">
   <div class="mask"></div>
   </td>
   <td class="lottery-unit lottery-unit-1">
   <img src="img/2.jpg">
   <div class="mask"></div>
   </td>
   <td class="lottery-unit lottery-unit-2">
   <img src="img/3.jpg">
   <div class="mask"></div>
   </td>
  </tr>
  <tr>
   <td class="lottery-unit lottery-unit-7">
   <img src="img/4.jpg">
   <div class="mask"></div>
   </td>
   <!-- 点击触发抽奖 -->
   <td><a href="#" rel="external nofollow" ></a></td>
   <td class="lottery-unit lottery-unit-3">
   <img src="img/5.jpg">
   <div class="mask"></div>
   </td>
  </tr>
  <tr>
   <td class="lottery-unit lottery-unit-6">
   <img src="img/6.jpg">
   <div class="mask"></div>
   </td>
   <td class="lottery-unit lottery-unit-5">
   <img src="img/7.jpg">
   <div class="mask"></div>
   </td>
   <td class="lottery-unit lottery-unit-4">
   <img src="img/8.jpg">
   <div class="mask"></div>
   </td>
  </tr>
  </table>
 </div>
 
 <script src="js/jquery.js"></script>
 <script type="text/javascript">
 var lot = $(".lottery-unit");
 var nowIndex = -1; //记录添加激活类的下标
 var btn = $("table").find("a")
 console.log(btn)
 var curIndex = null; //记录上一次坐标
 var round = 0; //记录移动几圈
 var n = 0; //记录移动了多少次
 var timer = null; //旋转计时器
 var priceIndex = (Math.random()*lot.length) | 0; //中奖的下标
 console.log(priceIndex)
 var isClick = true;
 function move(){
  n++;
  nowIndex++;
  if(n%8==0){
  round++;
  console.log("跑了"+round+"圈");
  if(round>=3){
   clearInterval(timer);
   timer = setInterval(move,50)
  }
  if(round > 8){
   clearInterval(timer);
   timer = setInterval(move,1000)
  }
  }
  // 第二种方式
  // if(n>=8 && n<12){
  // clearInterval(timer)
  // timer = setInterval(move,50)
  // }
  // if(n>=12){
  // clearInterval(timer)
  // timer = setInterval(move,50)
  // }
  
  lot.filter(".lottery-unit-"+nowIndex).addClass("active")
  // 当curIndex为0时，布尔值为false，所以要加curIndex==0
  if(curIndex || curIndex==0){
  lot.filter(".lottery-unit-"+curIndex).removeClass("active")
  }
  curIndex = nowIndex;
  
  // 如何实现中奖
  if(nowIndex == priceIndex && round > 8){
  
  clearInterval(timer);
  if(priceIndex==1){
   setTimeout(function(){
   alert("111111")
   },1000)
  }
  // 重置参数
  isClick = true;
  round = 0;
  nowIndex = -1;
  curIndex = null;
  priceIndex = (Math.random()*lot.length) | 0;
  console.log("中奖的下标",priceIndex)
  
  }
  if(nowIndex>=lot.length-1){
  nowIndex=-1;
  }
 }
 
 btn.click(function(){
  if(isClick){
  console.log("开始抽奖");
  isClick = false;
  timer = setInterval(move,100);
  }
 })
 </script>
 </body>
</html>
加载全部内容