今天讲解一下九宫格抽奖的制作过程及思路。实现思路HTML 结构搭建创建一个包含所有格子和抽奖按钮的容器每个格子和按钮都作为独立的元素方便后续通过 CSS 和 JavaScript 进行操作。CSS 样式设计通过设置容器和格子的样式包括尺寸、颜色、布局和定位打造出美观且符合预期布局的九宫格界面。JavaScript 交互逻辑利用 JavaScript 实现点击抽奖功能包括控制格子的闪烁效果、随机确定中奖格子以及在合适的时机停止闪烁并显示中奖结果。具体代码解释htmldiv classnine_boxdiv classnine prize1鱼香肉丝盖饭/divdiv classnine prize2咖喱鸡丁盖饭/divdiv classnine prize3麻辣拌/divdiv classnine prize4麻辣烫/divdiv classnine prize5炒饼丝/divdiv classnine prize6聚一下/divdiv classnine prize7宫保鸡丁盖饭/divdiv classnine prize8香辣面/divdiv classnine click onclickprize_whirl()点击抽奖/div/divscript srcjs/nine_draw.js/scriptAI写代码htmlHTML 代码构建了抽奖页面的基本结构包含一个nine_box容器内部有九个div元素分别代表不同的奖品格子和抽奖按钮。利用不同的类名来进行修改通过onclick属性为抽奖按钮绑定了点击函数当按钮被点击时将触发函数。css* {margin: 0;padding: 0;}.nine_box {width: 36%;height: 460px;padding: 1% 1% 0% 1%;/* display: flex; */justify-content: space-around;flex-wrap: wrap;background-color: aquamarine;margin-top: 60px;margin-left: 30%;position: relative;}.nine {width: 30%;height: 30%;text-align: center;line-height: 140px;background-color: pink;border-radius: 5px;}.prize1 {position: absolute;top: 3%;left: 3%;}.prize2 {position: absolute;top: 3%;left: 35%;}.prize3 {position: absolute;top: 3%;left: 67%;}.prize4{position: absolute;top: 35%;right: 3%;}.prize5{position: absolute;top: 67%;right: 3%;}.prize6{position: absolute;top: 67%;right: 35%;}.prize7{position: absolute;top: 67%;left: 3%;}.prize8{position: absolute;top: 35%;left: 3%;}.click{position: absolute;top: 35%;left: 35%;background-color: crimson;border-radius: 5px;border: 1px solid lightblue;}AI写代码css使用width和height属性控制格子的大小。例如nine_box设置了width: 36%和height: 460px每个奖品格子nine设置了width: 30%和height: 30%确保整体布局协调。通过background-color属性设置背景色如nine_box的背景色为aquamarine奖品格子的背景色为pink抽奖按钮的背景色为crimson增强视觉区分度。同时利用border-radius属性设置圆角border属性设置边框样式提升界面美观度。采用position: absolute对每个格子进行绝对定位精确指定它们在容器中的位置。也方便奖品顺时针来进行转圈例如prize1位于左上角top: 3%; left: 3%prize2位于其右侧top: 3%; left: 35%等。通过这种方式实现了九宫格的布局效果。js// 获取点击按钮let click document.getElementsByClassName(click)[0];let timing;let count;let index;let time 500;let prize document.getElementsByClassName(nine);let randoms;// 点击之后的函数function prize_whirl() {count 0;index 0;timing setInterval(set_timing, time);// console.log(index);prize[index].style.backgroundColor crimson;click.onclick null;randoms Math.floor(Math.random() * prize.length);console.log(randoms);}// 定时器的函数function set_timing() {index;// console.log(index);// console.log(prize.length - 2);if (index prize.length - 1) {index 0;count;prize[index].style.backgroundColor crimson;prize[prize.length - 2].style.backgroundColor pink;} else {prize[index].style.backgroundColor crimson;prize[index - 1].style.backgroundColor pink;}if (count 4) {time - 100;if (time 100) {time 100;}} else if (count 5) {time 100;if (time 1000) {time 1000;}}clearInterval(timing);timing setInterval(set_timing, time);if (count 6 index randoms) {clearInterval(timing);setTimeout(function() {alert(prize[index].innerText);prize[index].style.backgroundColor pink;click.onclick prize_whirl;}, 50);}}AI写代码javascript运行变量初始化click获取抽奖按钮元素。timing作为定时器的名字方便后续控制定时器。count记录抽奖过程中的循环次数index格子的索引值下标。time定时器的间隔时间初始值为 500 毫秒随着抽奖进度调整。prize获取所有奖品格子元素的集合。randoms用于存储随机数。prize_whirl函数点击抽奖后初始化count和index为 0。使用setInterval启动定时器每隔time毫秒调用一次set_timing函数开始格子的变色将初始格子索引为 0的背景颜色设置为crimson突出显示。通过click.onclick null;取消抽奖按钮的点击事件防止重复点击。使用Math.random()和Math.floor()生成一个随机的整数也就是抽到的具体奖品的下标。set_timing函数定时器中的函数index自增指向下一个要变色的格子。当index达到奖品格子数量减 1 时将index重置为 0并增加count。同时将当前索引为 0 的格子背景色设置为crimson将上一个循环中最后一个闪烁的格子索引为prize.length - 2背景色恢复为pink。在其他情况下将当前索引index对应的格子背景色设置为crimson将上一个索引index - 1对应的格子背景色恢复为pink实现格子的依次闪烁效果。根据count的值动态调整time当count小于 4 时每次循环将time减少 100 毫秒加快变色速度当count大于 5 时每次循环将time增加 100 毫秒减慢变色速度。达到闪烁的效果时间可以依照自己的想法设置进行更改。每次循环都先清除当前的定时器再重新设置一个新的定时器以应用更新后的time值。当count大于 6 且当前index等于randoms时意味着抽奖结果已确定。此时清除定时器使用setTimeout延迟 50 毫秒后弹出中奖提示框显示中奖格子的奖品内容通过prize[index].innerText获取将中奖格子的背景色恢复为pink并重新为抽奖按钮绑定prize_whirl函数允许用户再次抽奖。————————————————版权声明本文为CSDN博主「好青崧」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。原文链接https://blog.csdn.net/jht_520/article/details/147114584