jQuery 实现九宫格大转盘抽奖

前言前端九宫格抽奖是活动页面非常常见的需求很多新人写抽奖会遇到重复点击、动画变速、随机中奖、定时器控制这几个难点。本文基于 jQuery 原生实现九宫格抽奖实现点击按钮开始滚动、先加速后减速、随机指定中奖格子、滚动到目标奖品停止、防止重复多次点击抽奖。说明本次示例一共 8 个奖品格子 抽奖按钮不是 9 个奖品代码逻辑可以轻松改成 9 格奖品。效果预览页面一个大容器包裹 8 个奖品 div 和抽奖按钮点击【开始抽奖】红色高亮依次在奖品格子循环跑动先越来越快跑满 2 圈之后开始减速最终停在随机选中的奖品上弹出中奖提示。抽奖过程中按钮不可重复点击抽奖结束后恢复点击。完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlejQuery九宫格抽奖/title script srchttps://cdn.jsdelivr.net/npm/jquery3.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 classbox div classdiv2 prize短裙/div div classdiv3 prize口红/div div classdiv4 prize草莓/div div classdiv5 prize西瓜/div div classdiv6 prize奶茶/div div classdiv7 prize美甲/div div classdiv8 prize谢谢惠顾/div div classdiv9 prize小米手机/div button classbutton开始抽奖/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 批量获取。多类名写法classdiv2 prizediv2是单独标识prize是奖品公共类最后放抽奖 button 按钮点击触发抽奖。2、变量说明表格变量作用prizes所有奖品 DOM 集合i当前高亮奖品索引total已经转动的圈数inter定时器 id用来清除定时器time定时器间隔数值越小速度越快randoms随机中奖奖品下标3、事件绑定on /off使用.on(click,fn)绑定点击事件抽奖开始时调用.off(click)解绑按钮点击防止用户疯狂多次点击创建多个定时器动画错乱。抽奖结束后重新绑定事件允许下一次抽奖。对比$().click()是简写方式.on()是 jQuery 推荐的事件绑定方式支持事件委托。4、滚动高亮逻辑 rotates ()索引 i 自增当前格子变红上一格恢复原有背景色当索引走到最后一个奖品重置 i0圈数total1实现循环转圈变速逻辑前 2 圈加速time 不断减小最小限制 100ms防止过快超过 2 圈之后减速time 不断变大最大限制 1000ms模拟真实抽奖惯性效果。5、随机中奖判定Math.floor(Math.random() * prizes.length)生成 0 ~ 奖品总数 - 1 的整数下标提前确定中奖位置。 当圈数大于 2 圈并且当前索引等于提前生成的随机下标→ 停止定时器弹出中奖弹窗。关键点先确定中奖结果再开始动画。业务抽奖项目里正式环境这个随机结果应该后端返回前端只负责播放动画防止前端篡改中奖奖品。代码存在的小问题 优化建议频繁销毁重建定时器当前代码每次执行 rotates 都clearInterval再重新setInterval频繁创建定时器容易出现动画抖动。 ✅优化不动态修改定时器改用setTimeout递归每次修改延时时间。弹窗弹出时机 setTimeout 延时 50ms 只是微小延迟生产环境可以增加一点停顿用户体验更好。奖品布局 现在是 flex 自动排列如果要做成传统环形九宫格抽奖四周 8 格 中间按钮需要单独定位每个格子位置当前是简易横向换行九宫格。生产环境必改 前端随机仅适合本地演示正式项目中奖结果由后端接口返回前端不能用 JS 本地随机用户打开控制台可以修改随机逻辑作弊。总结这个案例非常适合前端入门学习定时器、jQueryDOM 操作、事件解绑、动画变速逻辑。 核心要点记住抽奖开始禁用按钮防止多次点击提前确定中奖位置动画跑到目标停止利用定时器间隔 time 实现加速减速定时器用完一定要 clearInterval避免内存泄漏