当前位置：首页 > JavaScript

js实现九宫格抽奖

2026-03-01 08:08:03JavaScript

实现九宫格抽奖的步骤

HTML结构
创建一个包含9个格子的容器，通常使用<div>元素排列成3x3的网格。每个格子代表一个奖项。

<div class="lottery-grid">
  <div class="grid-item" data-index="0">奖品1</div>
  <div class="grid-item" data-index="1">奖品2</div>
  <div class="grid-item" data-index="2">奖品3</div>
  <div class="grid-item" data-index="7">奖品8</div>
  <div class="grid-item" data-index="8">奖品9</div>
  <div class="grid-item" data-index="3">奖品4</div>
  <div class="grid-item" data-index="6">奖品7</div>
  <div class="grid-item" data-index="5">奖品6</div>
  <div class="grid-item" data-index="4">奖品5</div>
</div>
<button id="start-btn">开始抽奖</button>

CSS样式
使用CSS将格子排列成九宫格布局，并添加高亮样式用于抽奖时的视觉效果。

.lottery-grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  margin: 20px auto;
  width: 320px;
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.grid-item.highlight {
  background-color: #ffcc00;
  border-color: #ff9900;
}

JavaScript逻辑
实现抽奖的核心逻辑，包括高亮格子的移动和最终结果的判定。

document.getElementById('start-btn').addEventListener('click', startLottery);

function startLottery() {
  const items = document.querySelectorAll('.grid-item');
  const totalSteps = 30; // 总高亮移动步数
  let currentStep = 0;
  let currentIndex = 0;
  const speed = 100; // 初始速度（毫秒）

  // 随机决定中奖格子（实际项目中可能由后端返回）
  const prizeIndex = Math.floor(Math.random() * 9);

  // 清除所有高亮
  items.forEach(item => item.classList.remove('highlight'));

  // 开始动画
  const interval = setInterval(() => {
    items[currentIndex].classList.remove('highlight');
    currentIndex = (currentIndex + 1) % 9;
    items[currentIndex].classList.add('highlight');

    currentStep++;
    if (currentStep > totalSteps) {
      // 最后几步减速
      if (currentStep > totalSteps + 5 && currentIndex === prizeIndex) {
        clearInterval(interval);
        setTimeout(() => {
          alert(`恭喜获得: ${items[prizeIndex].textContent}`);
        }, 500);
      }
    }
  }, speed);
}