定时器练习
HTML代码：
<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>CSS代码：
<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>JS代码:
<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>效果为九宫格旋转抽奖。仅为个人记录练习。
ヾ(•ω•`)oByeBye~
