JavaScript实现抽奖效果

效果"/>

JavaScript实现抽奖效果

代码

<div id="box"><div class="option">民主</div><div class="option">文明</div><div class="option">和谐</div><div class="option">自由</div><div id="start">Start</div><div class="option">平等</div><div class="option">公正</div><div class="option">法治</div><div class="option">爱国</div>
</div>

逻辑

//1 点击开始触发定时器//2 定时器内部，随机一个数，通过这个数来获取奖品所在的元素//3 必须设置一个时间点 停止定时器let btn = document.getElementById('start');let options = document.getElementsByClassName('option');let timer = null;document.addEventListener('click', function () {// 设置初始值 作为事件判断let number = 0;if (timer == null) {// 触发定时器timer = setInterval(() => {number++;//随机0-7的数 通过数组下标选中let num = Math.round(Math.random() * (7 - 0) + 0);// 把所有的元素样式恢复for (let i = 0; i < options.length; i++) {options[i].style.background = '#fff'}// 给选中的元素添加背景样式options[num].style.background = 'lightblue';// 给定时器设置有效时间// 30代表业务要求 随便设置数目if (number >= 30) {clearInterval(timer);timer = null;}}, 100);}})

效果