当前位置：首页 > JavaScript

js实现九宫格抽奖

2026-04-04 08:44:57JavaScript

实现九宫格抽奖的核心思路

九宫格抽奖的核心在于动态控制奖品高亮顺序，最终停在目标奖品位置。以下是具体实现步骤：

HTML 结构设计

采用 ul 和 li 构建九宫格布局，每个格子包含奖品信息：

<div class="lottery-container">
  <ul class="lottery-grid">
    <li data-index="0">奖品1</li>
    <li data-index="1">奖品2</li>
    <li data-index="2">奖品3</li>
    <li data-index="8">奖品4</li>
    <li class="start-btn">开始</li>
    <li data-index="4">奖品5</li>
    <li data-index="7">奖品6</li>
    <li data-index="6">奖品7</li>
    <li data-index="5">奖品8</li>
  </ul>
</div>

CSS 样式设置

使用 Flex 布局实现九宫格，定义高亮状态样式：

js实现九宫格抽奖

.lottery-grid {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  list-style: none;
  padding: 0;
}

.lottery-grid li {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.lottery-grid li.active {
  background-color: #ffeb3b;
  box-shadow: 0 0 10px gold;
}

.start-btn {
  background-color: #4CAF50;
  color: white;
}

JavaScript 核心逻辑

初始化变量

定义格子索引的遍历顺序（顺时针方向）和动画参数：

const gridOrder = [0, 1, 2, 5, 8, 7, 6, 3]; // 九宫格高亮顺序
let currentIndex = 0;
let speed = 100; // 初始速度
let timer = null;
let cycles = 0; // 旋转圈数
const totalCycles = 3; // 总旋转圈数
const targetPrize = 4; // 假设抽中奖品5

高亮切换函数

控制格子高亮状态的切换：

js实现九宫格抽奖

function highlightNext() {
  document.querySelector('.active')?.classList.remove('active');
  const currentCell = document.querySelector(`[data-index="${gridOrder[currentIndex]}"]`);
  currentCell.classList.add('active');

  currentIndex = (currentIndex + 1) % gridOrder.length;
  if (currentIndex === 0) cycles++;
}

开始抽奖函数

实现加速-减速动画效果：

function startLottery() {
  if (timer) return;

  timer = setInterval(() => {
    highlightNext();

    if (cycles >= totalCycles && gridOrder[currentIndex] === targetPrize) {
      clearInterval(timer);
      timer = null;
      cycles = 0;
      alert(`恭喜获得: ${document.querySelector(`[data-index="${targetPrize}"]`).textContent}`);
    } else {
      speed = cycles >= totalCycles ? 
        Math.min(speed + 20, 200) : // 减速阶段
        Math.max(speed - 5, 50);    // 加速阶段
      clearInterval(timer);
      timer = setInterval(arguments.callee, speed);
    }
  }, speed);
}

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

完整代码示例

整合所有部分的可运行代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .lottery-grid { /* 前述CSS样式 */ }
  </style>
</head>
<body>
  <!-- 前述HTML结构 -->

  <script>
    // 前述JavaScript逻辑
  </script>
</body>
</html>