js制作九宫格抽奖功能

<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>

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

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