<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #lottery {} .box-one { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 330px; top: 6px; } .box-two { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 440px; top: 6px; } .box-three { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 550px; top: 6px; } .box-four { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 550px; top: 120px; } .box-five { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 550px; top: 234px; } .box-six { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 440px; top: 234px; } .box-seven { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 330px; top: 234px; } .box-eight { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; background-color: #fff; border: 1px solid black; margin: 5px; position: absolute; left: 330px; top: 120px; } .lottery-active { background-color: orange; } button { width: 100px; height: 100px; background-color: aqua; position: absolute; left: 446px; top: 126px; } button:hover { cursor: grabbing; } </style> </head> <body> <div id="lottery"> <div class="box-one">1</div> <div class="box-two">2</div> <div class="box-three">3</div> <div class="box-four">4</div> <div class="box-five">5</div> <div class="box-six">6</div> <div class="box-seven">7</div> <div class="box-eight">8</div> </div> <button id="start-btn">开始抽奖</button> <script> let but = document.getElementById('start-btn'); let lot = document.getElementById('lottery'); let num = lot.getElementsByTagName('div'); let i = 0; let speed = 0; let nums; let time = 500; but.onclick = button; function button() { num[i].style.backgroundColor = "orange"; inner = setInterval(rotates, time) nums = Math.floor(Math.random() * num.length); console.log(nums); but.onclick = null } function rotates() { if (i < num.length - 1) { i++; num[i].style.backgroundColor = "orange"; num[i - 1].style.backgroundColor = "white"; } else { i = 0; num[i].style.backgroundColor = "orange"; num[num.length - 1].style.backgroundColor = "white"; speed++; } if (speed <= 3) { if (time <= 100) { time = 100; } else { time -= 50; } } else { if (time >= 500) { time = 500; } else { time += 50; } } console.log(time); if (i == nums && speed > 5) { clearInterval(inner) setTimeout(function() { alert("获得" + num[i].innerHTML); num[i].style.backgroundColor = "white"; but.onclick = button; nums = 0; i = 0; time = 500; speed = 0; }, 200) } else { clearInterval(inner); inner = setInterval(rotates, time) } } </script> </body> </html>
如上图代码所示，分成了几块，点击事件，定时器主要是这两个的运用
