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