简介这是一份基于HTML/CSS/JS构建的年会抽奖页面源码主要面向前端开发者、企业行政及活动策划人员可在年会、庆典或团队活动中快速部署使用。页面采用JSON格式集中管理参与者名单并预留Ajax接口以动态加载后端数据支持一键开始/暂停抽奖、背景音乐开关及多套视觉主题切换现场交互效果比较震撼。压缩包共29个文件含1个HTML入口页面、8个JS脚本覆盖抽奖逻辑、滚动动画、数据读取与兼容处理、3个CSS样式文件含Bootstrap基础样式和自定义主题、15张图片素材以及1首MP3背景音乐整体体积仅3.58MB目录划分简洁便于直接修改或二次集成。该资源目前已有5123人学习浏览适用于希望快速上手并理解前端抽奖动画实现的人群解压后可自行替换名单、音乐与图片同时通过阅读JS和CSS结构可学习随机抽取、动画调度、本地数据配置等常见前端技巧。1. 年会抽奖别用PPT一个 HTML 文件才是正经解法每年年底行政和技术支持最怕被问“年会抽奖怎么做”。我见过有人花一周开发小程序结果现场连不上网有人用 PowerPoint 现场临时按名字被员工吐槽“手速就是内幕”。其实一套好看的 html 年会抽奖页面把名字导进去就能跑前端源码拆开改改字体、配色、特效半小时就能交付。这份资源就是典型的纯前端抽奖页面单页 HTML 加原生 CSS 和 JavaScript不依赖任何框架、不需要后端双击 index.html 就能在投影仪上开抽。适合行政、开发、以及被临时拉去救场的运维同学你只需要会改中括号里的字符串。2. 抽奖页面的技术选型三种玩法对比与核心抽奖逻辑2.1 滚动抽奖、转盘抽奖、随机亮名到底该选哪个先别急着打开源码搞清楚三种常见玩法的适用场景你才知道这份资源值不值得直接用。滚动抽奖是屏幕上名字快速跳动按停止后慢慢定住视觉效果最热闹适合大屏幕、百人以上的主会场转盘抽奖适合奖品少、人数少的部门聚餐指针转动有仪式感但人一多转盘上放不下名字随机亮名则是直接显示一个结果没有过程感适合抽单项大奖时穿插。这份资源走的是滚动抽奖路线因为它对人数规模最宽容名单再多也只是滚动列表的长度问题不会像转盘那样挤成一团。从实现成本上看转盘需要绘制扇形、计算角度和落点随机亮名最简单但缺乏仪式感而滚动抽奖只需要一个定时器来回切换数组下标前端基础足够就能改得动。如果你年会有二三百人我强烈建议就用滚动抽奖如果只有不到二十人转盘更出效果但那份源码里的转盘版本通常需要引入 Canvas改动量不是一个量级。这个资源的主文件就是针对滚动抽奖场景做的逻辑集中在一个 JS 文件里没有花哨的框架依赖这对年会前三天才拿到需求的你来说就是最大的安全感。2.2 公平性的核心先随机后动画而不是边转边决定很多新手写抽奖页面时会把动画和结果混在一起每 50 毫秒换一个名字停止时最后显示的那个名字就是中奖人。这听起来没问题但如果你让定时器直接跑停止的那一瞬间到底选中谁取决于浏览器事件的排队情况不同电脑上表现会不一致。更严谨的做法是“先抽好结果再播放动画”——点击开始时先用随机数生成最终中奖人的索引然后让滚动效果只是在最终结果上反复“绕圈”最后落到那个已经确定的索引上。这样不管动画怎么跳结果都是预先算好的不会出现最后一下卡顿导致显示错误。这份源码里的逻辑基本就是上面说的做法一个selectWinner()函数负责从人员数组里随机取下标一个startRoll()负责启动定时器滚动展示定时器里每次取“当前下标”而不是“随机下标”等滚动时间到再切换到最终中奖下标。这种设计的好处是抽奖过程可回放、可审查即使有人拿手机录屏也能说明白“动画停下时正好就是随机结果”。如果你后续想加入去掉已中奖人员只需要在selectWinner()里过滤数组即可在第三章我会给出具体改法。// 核心逻辑示意先定结果再滚动画 let employees [张伟,李娜,王强,赵敏,刘洋]; // 完整名单由后台导出 let rollingTimer null; let finalIndex -1; function selectWinner() { if (employees.length 0) return -1; return Math.floor(Math.random() * employees.length); // 先锁定中奖下标 } function startRoll() { finalIndex selectWinner(); // 抽奖结果在这里已经固定 let current 0; rollingTimer setInterval(() { // 定时器只负责“转”不负责“选” document.getElementById(display).textContent employees[current]; current (current 1) % employees.length; }, 50); // 50ms 切换一次名字 }上面代码说明了先选后动的顺序finalIndex在startRoll一开始就生成而定时器里current只是顺序递增等停止时把display定位到employees[finalIndex]即可。这里的 50 毫秒是滚动速度太快会有残影太慢显得拖沓我一般建议 30 到 80 毫秒之间。如果你发现现场大屏刷新率不高60ms 更稳妥。2.3 为什么不用后端存储纯前端反而更适合年会有人会问不用后端怎么保证名单安全说实话年会场合适用的技术方案是“越简单越可靠”。后端方案意味着现场要有服务器、要有网络、要有数据库账号哪个环节临时出错都会变成灾难。纯前端页面把名单写死在 JS 数组里或者从同目录的 JSON 文件读取启动即用断网也不怕。只要在抽奖开始前清空浏览器缓存就不会有人拿开发者工具改名单——真正的会场里行政拿笔记本连投影仪你把源码文件拷到桌面用 Chrome 打开就是全部操作。这份资源走的就是这条路。它把人员数据集中在一个data.js或app.js的数组里你可能只需要打开源码搜employees或names就能找到名单位置。后续你在改的时候最容易翻车的就是编码问题——如果文件是 UTF-8 却用了 GBK 打开再保存中文名字会变成乱码这点我在第四章会专门展开。先记住一个习惯用 VS Code 打开右下角显示 UTF-8 再保存别用 Windows 自带的记事本碰它。3. 把源码改成自己公司的版本名单、速度、特效一次说透3.1 先看清源码文件结构别一上来就改 HTML拿到这份 html 源码后第一步不是急着改名字而是先看一眼目录结构。常见的组织方式是一个index.html文件把结构、样式、逻辑全部内联写在一起也有拆成css/和js/子目录的。如果全在单文件里你只需要用编辑器打开那一个文件如果是拆分结构就要保证index.html引用的路径是对的否则直接双击会白屏。先按 F12 打开控制台看有没有红色报错没有报错再开始改。我个人建议你不要去动 HTML 的骨架改样式和脚本就足够。HTML 里的div iddisplay是显示名字的区域button idstartBtn开始按钮button idstopBtn停止按钮这些 id 在脚本里都有对应引用。你要做的是先跑通默认案例确认可以正常抽奖再往名单数组里填自己的员工。这样出了画面上的问题你知道是自己改坏了哪块而不是一来就陷入关联混乱。3.2 把名单换成你们公司的数组、去重与编码找到脚本里的名单数组常见变量名是employees、names或list。把它替换成你们同事的名字注意保留英文逗号和引号否则脚本会直接报错。从 Excel 导出名字时我一般先在 Excel 里拼好“张伟”“李娜”这种带引号的格式再整段粘贴到编辑器里避免手动打引号出错。// 名单数组每行一个名字去掉真实员工这里只做演示 let employees [ 张伟, 李娜, 王强, 赵敏, 刘洋, 陈静, 杨帆, 周涛, 吴磊, 许晴 ];上面这个数组就是整个抽奖系统的数据源你只需要把中文名字替换成你们团队的人名。注意两点第一名字之间必须是英文逗号最后一个名字后面可以不加逗号第二重复名字一定要先去重否则同一个李娜会出现两次被抽中两次都不知道怎么回事。Excel 里去重用“数据 → 删除重复项”就行复制进来之前先做这一步能省掉现场最大的尴尬。如果你需要从 CSV 导入可以用下面的方式在浏览器里离线转换然后复制到源码里。// 在浏览器控制台跑这段假设 clipboard 里是逗号分隔的名单 const csvText 张伟,李娜,王强,赵敏,刘洋; const names csvText.split(,).map((n) n.trim()).filter(Boolean); console.log(JSON.stringify(names)); // 把输出拷回源码数组这里先split按逗号切分再trim去掉首尾空格最后filter(Boolean)过滤空行。年会开始前临时加人、减人用这个思路改数组最省事。注意如果你的人名里本身有逗号比如“王,大锤”这种建议先把 CSV 里的逗号换成全角逗号避免被误切。3.3 调速滚动时长、切换间隔和停止后的特效抽奖的节奏感非常影响现场气氛。滚动太快看不清太慢又像卡顿停止时机太快没有悬念太慢又让人着急。这份源码里通常有interval和duration两个参数interval控制名字切换速度duration控制从开始到停止的总时长。我一般把interval设在 60msduration设在 3000ms也就是三秒后自动停。你还可以根据大屏尺寸调整名字字号字号越大切换速度越要慢一点否则人眼跟不上。// 调参区域界面右侧或脚本顶部 const config { rollInterval: 60, // 名字切换间隔单位 ms推荐 30-80 rollDuration: 3000, // 滚动总时长单位 ms推荐 2000-5000 fontSize: 64px, // 中奖名字字号大屏建议 56-72px freezeAfterStop: true // 停止后是否锁定结果并加高亮动画 };上面参数中rollInterval每隔 60ms 刷新一次显示名字rollDuration到 3000ms 时会自动执行停止逻辑。如果你希望手动点停止而不是自动停就把rollDuration设成 0然后绑定停止按钮的点击事件。freezeAfterStop为true时停止后会触发一个高亮动画比如背景闪烁或弹出“恭喜”遮罩这个要看源码里有没有写对应的类名。3.4 改皮肤背景、喜庆配色与中奖音效好看的页面主要靠 CSS这恰恰是很多人不敢下手的部分。但这里的套路很简单找到:root或body里的 CSS 变量换成你们公司的主题色。年会场合适用红色、金色、深蓝我个人偏爱深色背景加金色大字因为投影仪在亮环境下的对比度更好。:root { --page-bg: #1a0f0f; /* 深酒红减少投影反光 */ --text-color: #ffd700; /* 金色年会氛围感强 */ --accent-glow: 0 0 30px rgba(255, 215, 0, 0.6); /* 发光特效 */ --button-bg: #c0392b; --button-radius: 12px; }改 CSS 变量时注意字体发光效果text-shadow是现场最容易出彩但也是最容易翻车的点。发光范围过大名字反而看不清我一般控制在 20px 左右。如果你想换背景图片找到body的background属性替换成一张本地图片的相对路径即可注意别用网络链接现场断网就会露馅。3.5 音效与浏览器自动播放的兼容处理很多抽奖页面会配一段紧张的音效停止时再放一段掌声。但这个坑特别常见桌面浏览器会阻止没有用户交互的自动播放你点击开始按钮时触发的声音没问题但停止时的音效如果是在定时器回调里触发的可能被浏览器拦截。解决方法是提前预加载音频并在点击事件里先调用一次play()让浏览器认为后续播放是用户手势的一部分。具体做法如下。// 预加载音效避免自动播放被拦截 const audio new Audio(./sound/success.mp3); document.getElementById(startBtn).addEventListener(click, () { audio.load(); // 预加载资源 // 这里可以播放一段“开始音效” }); document.getElementById(stopBtn).addEventListener(click, () { audio.play().catch(() { // 如果被拦截至少不影响功能只做降级 console.warn(音效被浏览器拦截忽略一下); }); });这里必须加.catch()否则浏览器拦截时未处理的 Promise 报错会显示在控制台现场又有人传“程序崩了”。降级只是少了一段音频抽奖结果不受任何影响。4. 现场最容易翻车的 5 个坑乱码、卡顿、中了又中怎么解4.1 名字变成乱码现象打开页面后本来好好的员工名单在投影仪上变成“????”或一堆火星文。原因95%的可能是源码文件用 GBK 编码保存而 HTML 声明的是 UTF-8两个编码不一致。另一个常见原因是 Excel 粘贴时带了不可见字符。解决用 VS Code 打开 JS 或 HTML 文件点击右下角编码按钮选择“通过编码保存”改为 UTF-8 后重新保存。如果是从 Excel 直接复制先在记事本里转一道过滤掉格式信息再粘贴进去。我把这条放在第一条因为乱码一旦出现在大屏上行政会疯掉。4.2 点击“开始”按钮页面白屏现象点开始后名字没有滚动整个区域变成白色控制台报一堆错。原因最常见的错误是数组为空或者脚本里有语法错误。比如你删名单时把最后一行多删了一个逗号整个employees数组定义失效。解决按 F12 打开 Console看第一条报错的行号。如果是Unexpected token基本是括号或逗号问题回到数组定义处仔细检查。另外确认按钮绑定的函数名称和源码里写的完全一致我见过有人把startRoll改成startRoll()反而把函数引用变成立即执行导致初始化失败。4.3 名单滚动时一卡一卡大屏像幻灯片现象名字切换频率明显低于预期有时 200ms 才跳一次伴随画面闪烁。原因多半是页面渲染开销过大比如背景图片太大、CSS 阴影过多、或者名字区域使用了filter: blur()这类高性能消耗属性。另一个原因是你开了太多浏览器扩展影响 JS 执行。解决先用默认配置跑一遍如果默认流畅说明你改的 CSS 有问题逐个取消阴影、模糊、动画属性最先取消filter相关属性。如果默认就卡把interval从 60ms 调到 80ms 或 100ms降低切换频率后肉眼几乎分辨不出来但流畅度会显著改善。4.4 抽中了同一个同事两次现象第一次抽中的“李娜”第二局又出现在中奖名单上全场哄笑。原因没有在抽奖前把已中奖人员从employees数组里移除或者移除后没有重新计算employees.length。解决在selectWinner被调用前先执行一次过滤把上一轮中奖的人从数组里摘掉。最简单的方法是用splice在中奖结果展示后立即执行。let winners []; // 存储已中奖人 function markWinner(index) { winners.push(employees[index]); employees.splice(index, 1); // 从名单里移除下一次不会抽到 renderWinners(winners); // 更新屏幕左侧的中奖记录 }上面的splice会改变原数组所以startRoll里要始终读取最新的employees。注意如果你的源码已经在每轮结束后原样复活了名单记得把复活逻辑禁用否则系统会认为所有员工都一直可抽。4.5 关闭浏览器刷新后中奖记录全没了现象抽到一半误触了 F5或者笔记本休眠唤醒后页面重置中奖记录回到零。原因页面所有状态都保存在内存变量里没有持久化。这对年会现场是致命的所以我在第五章给你一个保存到localStorage的方案。解决临时救场时一边用笔记录中奖名单一边把页面里的中奖人同步更新到一张表格里。但更稳妥的是直接用下面的进阶方案刷新后恢复所有状态。5. 让抽奖更有“专业感”的技巧把中奖记录写进浏览器存储5.1 用 localStorage 实现刷新不丢离线也能恢复现场浏览器自带localStorage可以把键值对存到本地磁盘就算刷新、关机、重启浏览器数据还在。年会开始前在代码初始化时读取一次抽中一个人就追加一条同时渲染到页面的“已中奖名单”区域。这样就算现场有人不小心碰了 F5你也能从上次中断的位置继续而不是两眼一抹黑。// 中奖记录持久化 const STORAGE_KEY annual-party-winners-2025; function loadWinners() { const saved localStorage.getItem(STORAGE_KEY); return saved ? JSON.parse(saved) : []; } function saveWinners(winners) { localStorage.setItem(STORAGE_KEY, JSON.stringify(winners)); } function addWinner(name) { const winners loadWinners(); winners.push(name); saveWinners(winners); renderWinners(winners); }这段代码把中奖名单序列化成 JSON 字符串存进浏览器。loadWinners在页面加载时执行把上一次的数组还原addWinner每抽中一人就追加并立即保存renderWinners负责把数组显示在页面上。这里的关键是不要手动去改localStorage里的内容万一格式坏了直接localStorage.removeItem(STORAGE_KEY)重置即可。5.2 彩排时用“测试名单”验证别拿真实名单反复抽还有一个小技巧在data.js里把名单数组抽成一个变量现场前先换成testEmployees里面放着“测试1、测试2、测试3”这种明显不是真人的名字。彩排通过后再把真实名单换回来。这样既能完整走一遍流程又不会在彩排时把真实员工抽出来导致尴尬。如果你心急直接在控制台执行employees [测试1,测试2,测试3]也能临时覆盖但刷新后会还原适合快速验证。从那以后我每次年会前都强制走一遍流程先复制一份index.html作为备份在副本里把名单换成测试数据验证数组长度、按钮事件、音效和 localStorage 记录全部正常后再把真实名单覆盖回去最后用无痕窗口冷启动一次确认没有任何缓存残留。这个习惯帮我避免过一次现场空名单白屏的惨剧希望你用不到但值得保留。希望帮到你。本文还有配套的精品资源点击获取