HTML代码:
<div id="lottery">
<div class="lottery-item">1</div>
<div class="lottery-item">2</div>
<div class="lottery-item">3</div>
<div class="lottery-item">4</div>
<div class="lottery-item">5</div>
<div class="lottery-item">6</div>
<div class="lottery-item">7</div>
<div class="lottery-item">8</div>
<div class="lottery-item">9</div>
</div>
<button id="start-btn">开始抽奖</button>
CSS代码:
#lottery {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #e6e6e6;
}
.lottery-item {
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 1px solid #ccc;
}
.lottery-active {
background-color: orange;
}
JavaScript代码:
var items = document.getElementsByClassName('lottery-item');
var btn = document.getElementById('start-btn');
var index = 0;
var timer = null;
btn.onclick = function() {
if(timer) {
clearInterval(timer);
timer = null;
// 停止时将当前选中项背景色还原
items[index].classList.remove('lottery-active');
} else {
timer = setInterval(function() {
// 先将当前选中项背景色还原
items[index].classList.remove('lottery-active');
index ++;
if(index > 8) {
index = 0;
}
// 设置当前选中项的背景色
items[index].classList.add('lottery-active');
}, 100);
}
}
通过点击按钮,可以开始或停止抽奖的功能。其中,抽奖的动画效果是通过定时器实现的,每隔一段时间改变当前选中项的背景色来模拟抽奖的过程。当停止抽奖时,定时器会被清除,当前选中项的背景色会还原。