需求:
用点击事件等相关知识点完成幸运大转盘,页面打开,出现九宫格蓝色色块;
色块内分别是奖品,当点击开始按钮时,有一个灰色色块开始转动;
点击停止按钮时,灰色按钮停在哪里,就表示所中的奖品是什么.
如下图:
html部分:
<div class="container">
<div index_roll="1">600元优惠券</div>
<div index_roll="2">800元优惠券</div>
<div index_roll="3">1000元优惠券</div>
<div index_roll="0">800元优惠券</div>
<div index_roll="8">
<button>开始</button>
<button>停止</button>
</div>
<div index_roll="4">600元优惠券</div>
<div index_roll="7">600元优惠券</div>
<div index_roll="6">1000元优惠券</div>
<div index_roll="5">800元优惠券</div>
</div>
css部分:
* {
margin: 0;
padding: 0;
}
.container {
margin: 50px auto;
width: 500px;
height: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.container>div {
width: 150px;
height: 150px;
background-color: skyblue;
color: #ffffff;
text-align: center;
line-height: 150px;
}
button {
width: 60px;
height: 30px;
}
js部分:
var divs = document.querySelectorAll(".container>div")
var btns = document.querySelectorAll(".container>div>button");
var timeId = null;
var index = 0;
btns[0].onclick = function () {
clearInterval(timeId);
timeId = setInterval(() => {
for (var j = 0; j < divs.length; j++) {
divs[j].style.backgroundColor = "skyblue";
}
for (var i = 0; i < divs.length; i++) {
if (Number(divs[i].getAttribute("index_roll")) == index%8) {
divs[i].style.backgroundColor = "grey";
break;
}
}
index++;
}, 60);
}
btns[1].onclick= function () {
clearInterval(timeId)
}