js制作九宫格抽奖功能

最新推荐文章于 2024-06-12 21:37:57 发布

m0_黎明

最新推荐文章于 2024-06-12 21:37:57 发布

阅读量706

点赞数 1

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_74265396/article/details/134484960

版权

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

通过点击按钮，可以开始或停止抽奖的功能。其中，抽奖的动画效果是通过定时器实现的，每隔一段时间改变当前选中项的背景色来模拟抽奖的过程。当停止抽奖时，定时器会被清除，当前选中项的背景色会还原。