定时器练习
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~