js九宫格抽奖

好的，以下是一个简单的九宫格抽奖的 JavaScript 代码示例：

HTML 结构：

<div class="lottery">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
  </div>
  <button class="btn" onclick="startLottery()">开始抽奖</button>
</div>

CSS 样式：

.lottery {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 300px;
  height: 300px;
  padding: 10px;
  background-color: #eee;
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: #333;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.cell:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.btn {
  padding: 10px 20px;
  font-size: 20px;
  color: #fff;
  background-color: #f00;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  background-color: #c00;
}

JavaScript 代码：

const cells = document.querySelectorAll('.cell');
const btn = document.querySelector('.btn');
let timer;

function startLottery() {
  btn.disabled = true;
  let count = 0;
  timer = setInterval(() => {
    cells.forEach(cell => {
      cell.classList.remove('active');
    });
    let index = Math.floor(Math.random() * cells.length);
    cells[index].classList.add('active');
    count++;
    if (count === 20) {
      clearInterval(timer);
      btn.disabled = false;
      alert(`恭喜您抽中了 ${cells[index].textContent}！`);
    }
  }, 100);
}

cells.forEach(cell => {
  cell.addEventListener('click', () => {
    alert(`您选择了 ${cell.textContent}！`);
  });
});

这个代码通过将九个格子的 HTML 元素保存到一个数组中，然后在点击“开始抽奖”按钮后启动一个定时器，每隔一段时间就随机选择一个格子并给其添加 active 类名，同时移除其他所有格子的 active 类名，以模拟格子的闪烁效果。当定时器运行了一定次数后，就停止定时器并弹出一个提示框，告诉用户他/她抽中了哪个格子。

同时，这个代码还为每个格子添加了点击事件监听器，当用户点击格子时，会弹出一个提示框，告诉用户他/她选择了哪个格子。