顺序九宫格思路：
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>
//获取box
let 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;
//该转下一圈的话，圈数+1
count++;
//上一圈的最后一个奖品变回原色
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 {
//清除定时器
//在设置一个定时器9
inter = setInterval(autoScroll, time);
}
}
</script>