制作九宫格抽奖是一个很有意思的过程，废话不多说，直接上代码，看看你能抽到什么。
html部分
<body>
<div id="all">
<div class="one">M4A1-雷神</div>
<div class="two" style="font-size: 12px;">SCAR Light-白虎</div>
<div class="three">M200-幻神</div>
<div class="four" style="font-size: 14px;">大礼包（一折）</div>
<div class="five">98K-星神</div>
<div class="six">谢谢惠顾</div>
<div class="seven">王者-葵</div>
<div class="eight">再来一次</div>
<button id="button">开始抽奖</button>
</div>
</body>
css部分
<style>
#all {
width: 360px;
height: 360px;
margin: auto;
position: relative;
text-align: center;
line-height: 100px;
}
.one {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 10px;
}
.two {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 120px;
top: 10px;
}
.three {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 230px;
top: 10px;
}
.four {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 230px;
top: 120px;
}
.five {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 230px;
top: 230px;
}
.six {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 120px;
top: 230px;
}
.seven {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 230px;
}
.eight {
background-color: aquamarine;
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 120px;
}
#button {
display: block;
background-color: cadetblue;
width: 100px;
height: 100px;
position: absolute;
left: 120px;
top: 120px;
cursor: pointer;
}
</style>
js部分
<script>
let button = document.getElementById('button');//获取按钮
let all = document.getElementById('all'); //获取所有盒子
let prize = all.getElementsByTagName('div');//获取奖品
console.log(prize);
let i = 0;//声明一个变量 对应奖品
let speed = 0;//声明一个变量对应圈数
let time = 300;//声明时间变量
let inter;// 声明一个变量，把定时器赋给这个变量
let num;//声明一个变量，获得一个随机数组
button.onclick = asb; //给转动函数赋一个名字，为了不能重复点击
//点击
function asb() {
prize[i].style.background = 'blue';
inter = setInterval(rotates, time);
num = Math.floor(Math.random() * prize.length);
console.log(num);
button.onclick = null;
}
//转动颜色变化
function rotates() {
if (i < prize.length - 1) {
i++;
prize[i].style.backgroundColor = 'blue';
prize[i - 1].style.backgroundColor = 'aquamarine';
} else {
i = 0;
prize[i].style.backgroundColor = 'blue';
prize[prize.length - 1].style.backgroundColor = 'aquamarine';
speed++;
}
//速度变化设置
if (speed < 2) {
time -= 20;
if (time < 100) {
time = 100;
}
} else if (speed > 4) {
time += 50;
if (time > 500) {
time = 500;
}
}
//判定停止
if (i == num && speed > 7) {
clearInterval(inter);
//设置一次性定时器，用来设置弹窗和恢复数据
setTimeout(function() {
alert("恭喜您获得" + prize[i].innerHTML);
//重置数据
prize[i].style.backgroundColor = 'aquamarine';
i = 0;
time = 100;
speed = 0;
num = 0;
button.onclick = asb;
}, 400)
} else {
//重置定时器
clearInterval(inter);
inter = setInterval(rotates, time);
}
}
</script>
ヾ(￣▽￣)Bye\~Bye\~
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/137832535