JavaScript九宫格随机抽奖示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>九宫格抽奖</title><style>/* 全局样式重置 */* {margin: 0;padding: 0;}/* 抽奖容器样式 */.lottery-container {width: 300px;height: 300px;margin: 50px auto;border: 1px solid #ccc;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap: 5px;background-color: lightgray;}/* 每个格子的样式 */.lottery-item {display: flex;justify-content: center;align-items: center;font-size: 18px;background-color: cadetblue;color: white;}/* 抽奖按钮样式 */.lottery-button {width: 100px;height: 40px;margin: 20px auto;display: block;border: none;border-radius: 5px;background-color: navajowhite;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="lottery-container"><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 class="lottery-button" id="lotteryButton">开始抽奖</button><script>// 获取抽奖按钮元素const lotteryButton = document.getElementById('lotteryButton');// 获取所有的抽奖格子元素，返回的是一个类数组对象const lotteryItems = document.querySelectorAll('.lottery-item');// 用于记录当前选中的格子索引，初始化为0let currentIndex = 0;// 用于记录抽奖转动的圈数let roundCount = 0;// 随机生成的中奖格子索引let winningIndex;// 本次抽奖目标转动圈数，这里设置为5 - 10圈之间，可根据需求调整let targetRoundCount;// 定时器的引用，用于控制抽奖转动的间隔和停止let timer;// 点击抽奖按钮时触发的函数lotteryButton.addEventListener('click', function () {// 随机生成中奖格子的索引，范围是0到8（对应九宫格的9个格子）winningIndex = Math.floor(Math.random() * lotteryItems.length);// 随机生成目标转动圈数，范围在5 - 10圈targetRoundCount = Math.floor(Math.random() * 6 + 5);// 启动抽奖转动逻辑，通过定时器来控制startLottery();});// 启动抽奖转动的函数function startLottery() {// 设置定时器，每200毫秒执行一次rotateLottery函数，来模拟抽奖转动效果timer = setInterval(rotateLottery, 200);}// 模拟抽奖转动的函数，实现格子的随机变色切换效果function rotateLottery() {// 随机选择下一个要变色显示的格子索引（不按照顺序）let nextIndex;do {nextIndex = Math.floor(Math.random() * lotteryItems.length);} while (nextIndex === currentIndex);// 将当前选中的格子恢复默认颜色（cadetblue）lotteryItems[currentIndex].style.backgroundColor = 'cadetblue';// 更新当前选中的格子索引为新选择的索引currentIndex = nextIndex;// 将新选中的格子设置为高亮颜色（这里设置为黄色，可根据喜好调整）lotteryItems[currentIndex].style.backgroundColor = 'yellow';// 判断是否转完一圈，九宫格转完一圈即每个格子都经过一次选中if (currentIndex === 0) {roundCount++;}// 判断是否达到目标转动圈数if (roundCount >= targetRoundCount) {// 达到目标圈数后，清除定时器，停止抽奖转动clearInterval(timer);// 判断当前选中的格子是否为中奖格子if (currentIndex === winningIndex) {// 如果是中奖格子，弹出提示框告知用户中奖信息alert('🎉恭喜你，中奖的是：' + lotteryItems[currentIndex].innerHTML);}return;}}</script>
</body></html>

代码总结注释

HTML 结构部分
- 页面的 head 标签内定义了页面的标题、字符编码以及样式相关的 CSS。样式部分主要对抽奖容器（.lottery-container）、抽奖格子（.lottery-item）和抽奖按钮（.lottery-button）进行了样式设置，使得页面呈现出九宫格抽奖的基本外观，抽奖容器使用 grid 布局来均匀划分九宫格，每个格子设置了背景色、文字颜色等样式，抽奖按钮设置了大小、颜色、圆角等外观样式。
- 在 body 标签内，首先创建了一个包含九个 div（代表九宫格的格子）的抽奖容器，每个格子里显示了不同的奖品名称（这里简单写为奖品 1 - 奖品 9，实际应用中可替换为真实奖品信息），然后添加了一个 id 为 lotteryButton 的按钮用于触发抽奖操作。
JavaScript 代码部分
- 变量声明与初始化：
  - 通过 document.getElementById 和 document.querySelectorAll 方法获取到抽奖按钮元素和所有抽奖格子元素，并分别存储在 lotteryButton 和 lotteryItems 变量中。
  - 声明了几个关键变量，currentIndex 用于记录当前选中的格子索引，初始值设为 0；roundCount 用于记录抽奖转动的圈数，初始值为 0；winningIndex 用来存储随机生成的中奖格子索引；targetRoundCount 用于设定本次抽奖目标转动的圈数，初始时会在 5 - 10 圈之间随机生成；timer 变量用于保存定时器的引用，方便后续控制定时器的启动、停止等操作。
- 点击事件处理（lotteryButton.addEventListener('click', function () {...})）：
  - 当用户点击抽奖按钮时，首先会随机生成中奖格子的索引（通过 Math.floor(Math.random() * lotteryItems.length) 在 0 到格子总数减 1 的范围内生成一个随机整数），这个索引对应着九宫格中的某个格子，也就是中奖的目标格子。
  - 接着随机生成本次抽奖要转动的目标圈数（通过 Math.floor(Math.random() * 6 + 5) 生成一个 5 - 10 之间的随机整数作为圈数），然后调用 startLottery 函数启动抽奖转动逻辑，通过定时器来模拟抽奖过程中格子不断切换变色的效果。
- 抽奖转动启动函数（startLottery）：
  - 此函数内部使用 setInterval 方法创建一个定时器，每隔 200 毫秒就会调用一次 rotateLottery 函数，以此来控制抽奖过程中格子的切换频率，实现类似转动的视觉效果，定时器的引用保存在 timer 变量中，方便后续对其进行操作。
- 抽奖转动逻辑函数（rotateLottery）：
  - 首先通过一个 do-while 循环随机选择下一个要变色显示的格子索引（确保每次选择的索引与当前索引不同，实现随机切换效果），并将其赋值给 nextIndex 变量。
  - 接着将当前选中的格子（索引为 currentIndex）的背景颜色恢复为默认的 cadetblue（深蓝色），然后更新 currentIndex 为新选择的 nextIndex，并将新选中的格子背景色设置为高亮的 yellow（黄色），通过这种颜色切换来模拟抽奖转动时格子的闪烁效果。
  - 通过判断 currentIndex 是否等于 0 来确定是否转完一圈（因为九宫格是循环的，当回到第一个格子时可认为转完了一圈），如果等于 0，则将 roundCount（记录圈数的变量）自增 1。
  - 最后判断 roundCount 是否达到了之前随机生成的 targetRoundCount（目标转动圈数），如果达到了目标圈数，就使用 clearInterval 方法清除定时器，停止抽奖转动，然后判断当前选中的格子（索引为 currentIndex）是否与之前随机生成的中奖格子索引（winningIndex）相等，如果相等，则弹出提示框告知用户中奖信息，显示的内容是对应格子里的奖品名称（通过 lotteryItems[currentIndex].innerHTML 获取格子内的文本内容）。