制作九宫格抽奖是一个很有意思的过程，废话不多说，直接上代码，看看你能抽到什么。
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~
