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);
        }
      })

效果