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宫格抽奖,样式可以根据需求随意改,欢迎各位大神提点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值