JS 时间函数实现9宫格抽奖

JS 时间函数实现9宫格抽奖

思路：九宫格抽奖抽象出来，其实就是点击开始按钮以后，从首个单元开始，不停的绕着8个格子转动，最后停留在目标位置。

以下是html部分：

<div class="bigBox">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box_s">
            <button id="btn">开始</button>
            <button "stop()">结束</button>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

js部分：

<script>
    var box = document.getElementsByClassName("box");  //获取所有的旋转盒子
    var arr = [0, 1, 2, 4, 7, 6, 5, 3];     //获取顺时针的下标旋转的位置
    var timer = null;            //清楚时间函数
    var num = 0;                //定义旋转从0开始

    btn.onclick = function() {
        if (timer!=null) {              //使在循环过程中时间不再累加
            return
        }
       timer= setInterval(function(){               //间隔时间函数，0.5秒执行一次；
            for (var i = 0; i < arr.length; i++) {    
                box[arr[i]].style.background="#f40";       //循环让每个盒子的背景色变为初始值
            }
            box[arr[num]].style.background="skyblue";          //当循环到每个盒子时使它变色
            num++;                              //依次顺序加1
            if (num==arr.length) {          //判断，当顺换完一次后，又让它从第一张开始。
                num=0
            }
        },500)
    }
  function stop() {
        clearInterval(timer)            //当点击停止按钮时，清除时间函数。
        timer = null;
    }
</script>

以上是简单的9宫格抽奖，样式可以根据需求随意改，欢迎各位大神提点