利用JavaScript实现顺序九宫格抽奖

顺序九宫格思路：

    1.先获取抽奖按钮,方便给按钮绑定点击事件2.初始化下标k=0,用于表示当前选中的索引下标，后续滚动起来会一直刷新3.获取大div盒子4.获取盒子里所有div元素，充当一个数组，后续可以通过下标来访问每个小div，进行一系列操作：换背景颜色5.设置滚动间隔，初始化时间500mm，后续通过判断圈数来设置时间6.声明一个存定时器标识的变量，后续来停止滚动7.初始化圈数=0，后续可以通过判断几圈来设置滚动快慢8.初始化随机数=0，存中奖下标的9.给抽奖按钮上点击事件9.1.给上面获取到的所有div元素的数组的下标k上背景颜色，显示滚动到哪了9.2生成随机数（0-0.999）✖获取到的所有div的长度（8个div 下标：0-7 长度：8 例：0.5*8=4）然后这个数再向下取整，存到上面的随机数里9.3设置定时器（执行的a函数，上面设置过的毫秒数）10.上a函数10.1 if else判断 条件：k下标小于所有div的长度-1（因为里面有8个div 长度是8 但是索引是0-7）语句:先索引+1，然后div的索引下标k-1（上一个）变成原色 k（当前的索引下标）变成红色否则：k不等长度的话 说明已经转了一圈了  就让k重新=0，然后div的索引下标k-1（上一个）变成原色 k（当前的索引下标）变成红色，再圈数+=1（+1是运算+=是赋值）10.2 if else判断 这个判断的是 修改滚动时间间隔的。开始滚动--结束滚动条件：圈数小于5 说明还早 再转快点语句：再嵌套一个if else， if(条件:time时间<=100 语句：time=100 意思是 最快就是100毫秒跳一个格子否则：time-=20 意思是 时间小于等于100的话 滚的太慢了 让每个格子滚到下一个的时间-20毫秒 )否则：慢慢结束滚动。嵌套一个if else， if（条件：time>=500 语句：time=500最慢就是500毫秒）否则：time+=20 意思是 太快了 要慢慢停下来 就每跳一个格子就+20毫秒10.3 if else判断 这个判断是 固定圈数和确定中奖的是那个一个东西条件：圈数大于8 &&并且 存的随机数==等于索引下标k语句：清除定时器 ；弹窗提示 获取到的所有div的下标k。innerHTML 来确定是那个奖品否则：清除定时器 ；再启动新的定时器 。按照 time 给的时间去调用 scrolls 函数，继续执行相关的操作

CSS部分：

* {margin: 0;padding: 0;}.box {background-color: lightgray;width: 340px;height: 340px;position: relative;}.box div {background-color: cadetblue;width: 100px;height: 100px;text-align: center;line-height: 100px;}.div1 {position: absolute;top: 10px;left: 10px;}.div2 {position: absolute;top: 10px;left: 120px;}.div3 {position: absolute;top: 10px;left: 230px;}.div4 {position: absolute;top: 120px;left: 230px;}.div5 {position: absolute;top: 230px;left: 230px;}.div6 {position: absolute;top: 230px;left: 120px;}.div7 {position: absolute;top: 230px;left: 10px;}.div8 {position: absolute;top: 120px;left: 10px;}.giftButton {position: absolute;width: 100px;height: 100px;top: 120px;left: 120px;border-radius: 10px;background-color: navajowhite;}

HTML部分

8个礼品div，1个开始抽奖按钮 都被最外层的一个大的div包着，通过子绝父相定位成一个九宫格

<div class="box"><div class="div1">电脑</div><div class="div2">手机</div><div class="div3">音响</div><div class="div4">冰箱</div><div class="div5">空调</div><div class="div6">衣柜</div><div class="div7">沙发</div><div class="div8">地毯</div><button class="giftButton">开始抽奖</button></div>

JS部分 

<script>//获取boxlet boxCenter = document.getElementsByClassName('box')[0];//获取boxcenter里的所有的div元素let allGift = boxCenter.getElementsByTagName('div');//获取到抽奖按钮,后续帮点击事件let giftButtons = document.getElementsByClassName('giftButton')[0];//充当奖品的下标let k = 0;// 旋转时间间隔let time = 500;//圈数，就是转动的圈数let count = 0;//存定时器的let inter;//随机的数（中奖的下标）let random = 0;//上点击事件giftButtons.onclick = function() {//奖品的下标k变颜色 allGift[k].style.backgroundColor = 'yellow';// 先生成一个随机数，然后*box里的所有div的数量,再向下取整random = Math.floor(Math.random() * allGift.length);//设定时器inter = setInterval(autoScroll, time);}//给函数命名 方便删除/创建定时器function autoScroll() {//k小于长度 代表转到最后一个元素了   if (k < allGift.length - 1) {k++;//上一个奖品变回原色allGift[k - 1].style.backgroundColor = 'cadetblue';//当前索引下标变红allGift[k].style.backgroundColor = 'yellow';//k比长度长的话代表该转第二圈了} else {//重新让k=0下标， 下一次循环k = 0;//该转下一圈的话，圈数+1count++;//上一圈的最后一个奖品变回原色allGift[allGift.length - 1].style.backgroundColor = 'cadetblue';//当前索引下标变红allGift[k].style.backgroundColor = 'yellow';}if (count < 3) {//圈数小于5 ，每次都-100 让他变快变快time -= 100;//限制条件：最快滚动就是0.2秒if (time < 100) {time = 100;}//最外面的否则。就是圈数大于} else {//让他变慢time += 100;//限制条件：最慢就是2秒滚动一次if (time > 300) {time = 300;}}//判断中奖的是啥 和 确认转的圈数clearInterval(inter);if (random == k && count > 4) {//提示用户alert('🎉恭喜你,中奖的是🎉:' + '👉👉' + allGift[k].innerHTML + '👈👈');} else {//清除定时器//在设置一个定时器9inter = setInterval(autoScroll, time);}}</script>