企业官网建设流程全解析

前言

前端九宫格抽奖是活动页面非常常见的需求，很多新人写抽奖会遇到重复点击、动画变速、随机中奖、定时器控制这几个难点。本文基于 jQuery 原生实现九宫格抽奖，实现：点击按钮开始滚动、先加速后减速、随机指定中奖格子、滚动到目标奖品停止、防止重复多次点击抽奖。

说明：本次示例一共 8 个奖品格子 + 抽奖按钮，不是 9 个奖品，代码逻辑可以轻松改成 9 格奖品。

效果预览

页面一个大容器包裹 8 个奖品 div 和抽奖按钮，点击【开始抽奖】，红色高亮依次在奖品格子循环跑动，先越来越快，跑满 2 圈之后开始减速，最终停在随机选中的奖品上，弹出中奖提示。抽奖过程中按钮不可重复点击，抽奖结束后恢复点击。

完整代码

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery九宫格抽奖</title> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <style> .box { width: 360px; display: flex; flex-wrap: wrap; gap: 10px; } .prize { width: 100px; height: 100px; background: rgb(71, 71, 118); color: #fff; display: flex; align-items: center; justify-content: center; font-size:16px; border-radius: 6px; } .button { width: 100px; height:100px; margin-top:10px; background: #f56c6c; color:#fff; border:none; border-radius:6px; font-size:16px; cursor: pointer; } </style> </head> <body> <!-- 九宫格样式 一个大div 里面放九个小格子 class的多类名命名方法 class="类名1 类名2 类名3" --> <div class="box"> <div class="div2 prize">短裙</div> <div class="div3 prize">口红</div> <div class="div4 prize">草莓</div> <div class="div5 prize">西瓜</div> <div class="div6 prize">奶茶</div> <div class="div7 prize">美甲</div> <div class="div8 prize">谢谢惠顾</div> <div class="div9 prize">小米手机</div> <button class="button">开始抽奖</button> </div> <script> $(document).ready(function() { let prizes = $(".prize"); // 使用jQuery获取所有奖品元素 并赋给prizes变量 let but = $(".button"); // 获取按钮元素 let i = 0; //奖品的索引 let total; //定义转的圈数 let inter; //定时器标识 let time = 1000; //定时器时间间隔 let randoms; //定义生成随机中奖商品的下标 // but.click(click_rotate); // 点击抽奖事件绑定 采用click方式 绑定事件：当按钮被点击时，执行 click_rotate 函数 $(".button").on("click", click_rotate); //on绑定触发 //点击抽奖的事件函数 function click_rotate(){ total = 0; time = 1000; i = 0; prizes.eq(i).css("background-color", "red"); //利用eq(index) 筛选出索引为i的商品 保持颜色为红色 randoms = Math.floor(Math.random() * prizes.length); //生成随机中奖物品的随机数 // console.log(randoms); inter = setInterval(rotates, time); console.log(inter); but.off("click"); //移除点击事件防止重复触发 采用off方式解绑click事件 采用的是变量 $(".button").off("click"); //采用的是元素名 对应事件 } // 旋转效果的函数 function rotates(){ //处理奖品高亮移动逻辑 if(i < prizes.length - 1){ i++; prizes.eq(i).css("background-color", "red"); prizes.eq(i-1).css("background-color", "rgb(71, 71, 118)"); } else { i = 0; prizes.eq(i).css("background-color", "red"); prizes.eq(prizes.length - 1).css("background-color", "rgb(71, 71, 118)"); total++; } // 控制旋转速度 if(total < 2){ time -= 100; if(time <= 100){ time = 100; } } else if(total >= 2){ time += 100; if(time >= 1000){ time = 1000; } } //判断是否中奖 if(total > 2 && i == randoms){ clearInterval(inter); setTimeout(function(){ alert("您本次的中奖结果是：" + prizes.eq(i).html()); //字符串拼接 .html() prizes.eq(i).css("background-color", "rgb(71, 71, 118)"); but.click(click_rotate); //重新绑定点击事件 }, 50); } else { clearInterval(inter); inter = setInterval(rotates, time); //setInterval执行完一次函数 会返回一个定时器ID 赋值给inter 用于清除定时器 } } }); </script> </body> </html>

核心思路讲解

1、DOM 结构说明

外层.box容器，内部 8 个奖品格子统一加prize公共类，方便 jQuery 批量获取。

• 多类名写法：class="div2 prize"，div2是单独标识，prize是奖品公共类
• 最后放抽奖 button 按钮，点击触发抽奖。

2、变量说明

表格

3、事件绑定：on /off

使用.on("click",fn)绑定点击事件；抽奖开始时，调用.off("click")解绑按钮点击，防止用户疯狂多次点击，创建多个定时器，动画错乱。抽奖结束后重新绑定事件，允许下一次抽奖。

对比：$().click()是简写方式，.on()是 jQuery 推荐的事件绑定方式，支持事件委托。

4、滚动高亮逻辑 rotates ()

1. 索引 i 自增，当前格子变红，上一格恢复原有背景色
2. 当索引走到最后一个奖品，重置 i=0，圈数total+1，实现循环转圈
3. 变速逻辑：前 2 圈加速（time 不断减小，最小限制 100ms，防止过快）；超过 2 圈之后减速（time 不断变大，最大限制 1000ms），模拟真实抽奖惯性效果。

5、随机中奖判定

Math.floor(Math.random() * prizes.length)生成 0 ~ 奖品总数 - 1 的整数下标，提前确定中奖位置。 当圈数大于 2 圈，并且当前索引等于提前生成的随机下标→ 停止定时器，弹出中奖弹窗。

关键点：先确定中奖结果，再开始动画。业务抽奖项目里，正式环境这个随机结果应该后端返回，前端只负责播放动画，防止前端篡改中奖奖品。

代码存在的小问题 & 优化建议

1. 频繁销毁重建定时器当前代码每次执行 rotates 都clearInterval再重新setInterval，频繁创建定时器，容易出现动画抖动。 ✅优化：不动态修改定时器，改用setTimeout递归，每次修改延时时间。
2. 弹窗弹出时机 setTimeout 延时 50ms 只是微小延迟，生产环境可以增加一点停顿，用户体验更好。
3. 奖品布局 现在是 flex 自动排列，如果要做成传统环形九宫格抽奖（四周 8 格 + 中间按钮），需要单独定位每个格子位置，当前是简易横向换行九宫格。
4. 生产环境必改 前端随机仅适合本地演示！正式项目中奖结果由后端接口返回，前端不能用 JS 本地随机，用户打开控制台可以修改随机逻辑作弊。

总结

这个案例非常适合前端入门学习定时器、jQueryDOM 操作、事件解绑、动画变速逻辑。 核心要点记住：

1. 抽奖开始禁用按钮，防止多次点击
2. 提前确定中奖位置，动画跑到目标停止
3. 利用定时器间隔 time 实现加速减速
4. 定时器用完一定要 clearInterval，避免内存泄漏