【简易幸运抽奖】

最新推荐文章于 2019-11-02 11:39:30 发布

原创最新推荐文章于 2019-11-02 11:39:30 发布 · 336 阅读

CC 4.0 BY-SA版权

这是一个【简易幸运抽奖】的代码，欢迎大家前来指导！

<style type="text/css"> //css样式
  .bigbox{
   width:480px;
   height:480px;
   margin: 0 auto;
   
  }
  .box,.box1{
   width:150px;
   height:150px;
   background: skyblue;
   float: left;
   text-align: center;
   margin-right: 10px;
   margin-bottom: 10px;
   line-height: 150px;
   color:white;
  }
  #start{
   width:60px;
   height:25px;
   background: hotpink;
   border: none;
   color: white;
   margin-right: 10px;
  }
  #stop{
   width:60px;
   height:25px;
   background: hotpink;
   border: none;
   color: white;
  }
 </style>

<body>
 <div class="bigbox">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box1">
   <button id="start">开始</button>
   <button id="stop" "stop()">停止</button>
  </div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
 </div>
</body>

<script type="text/javascript">
 var box = document.getElementsByClassName("box"); //获取所有的旋转盒子
 // console.log(box);
 var arr = [0,1,2,4,7,6,5,3];  //定义数组根据下标找旋转的位置
 var order = 0;  //从0开始旋转
 var timer = null; //处理bug
 start.onclick = function(){
  clearInterval(timer); //目的是使函数每次都从第一个开始
  timer = setInterval(function(){ //间隔时间函数，0.1秒执行一次；
   var a = arr[order]; //定义a使下标与旋转的盒子对应 
      for (var i = 0; i < box.length; i++) {
       box[i].style.background = "skyblue"; //循环使每个盒子的背景颜色变为初始颜色；
       }
      box[a].style.background = "hotpink"; //当循环到每个盒子时使它变为粉色；
      order++; //每次顺序加1
      if (order == arr.length) { //判断，当顺序循环完一次后，又让它从第一张开始。
       order = 0;
      }
     },100);
    }
   function stop(){
     clearInterval(timer); //当点击停止按钮时，清除时间函数。
     order = 0;
    }
</script>