<!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获取格子内的文本内容）。
- 首先通过一个
- 变量声明与初始化：
总的来说，这段代码实现了一个简单的九宫格抽奖功能，通过随机选择格子、模拟转动圈数以及判断中奖等逻辑，让用户点击按钮后能参与抽奖并在满足条件时得知中奖结果，同时可以根据实际需求对抽奖的各项参数（如目标圈数范围、格子样式、奖品信息等）进行调整和扩展。
