简介一款基于静态HTML开发的公司年会抽奖工具面向具备HTML/CSS/JavaScript基础、希望自行定制抽奖环节的策划或开发人员。压缩包内共22个文件包含2个HTML页面、1个CSS样式表、7个JS脚本以及8个PNG和4张JPG图片整体仅178KB结构与典型前端小项目一致轻量易部署。其中JS脚本集成了抽奖核心逻辑与二维码模块qrcode.min.js方便在现场进行扫码互动或名单展示。通过修改源码中的奖项数据、参与名单和随机算法即可适配不同规模的活动同时界面图片资源可直接替换快速换肤。目前已有1353人学习对于需要快速获得年会抽奖方案且能接受代码自定义的用户来说这套静态页面源码比在线工具更灵活也便于离线运行和数据隐私保护。 每到年底总有同事跑过来问“年会抽奖软件你搞不搞”往年我都是临时从网上找一个在线抽奖页面凑合结果现场经常碰到网络卡顿、弹广告甚至抽奖页面突然打不开的尴尬。今年我下定决心用纯静态HTML自己做了一套公司年会抽奖软件——整个程序就是一个HTML文件不依赖后端服务也不依赖网络双击打开浏览器就能跑。这篇文章把完整的方案设计、核心代码和现场踩坑记录都分享出来特别适合年底需要给公司年会做抽奖程序、又不想引入复杂系统的同学参考。1. 为什么选静态HTML年会抽奖的底层需求1.1 年会现场的第一原则是稳定不是炫酷年会抽奖这个场景本质上不是软件工程问题而是“大型活动现场的可靠性问题”。想象一下几百双眼睛盯着大屏幕主持人喊“开始抽奖”结果页面白屏十秒钟没有反应后台负责操作的同事汗直接就下来了。我做过几年活动支持最深的体会是抽奖软件最大的卖点不是动画有多炫而是不出事。静态HTML方案正好命中这个痛点。所谓静态HTML通俗说就是整个应用只有一个HTML文件里面把结构、样式、逻辑全部写完浏览器打开就能运行。它不依赖服务器不依赖数据库不需要安装运行环境甚至不需要外网。这样就把年会现场最大的不确定性——网络和外部系统直接干掉了。你可能会问现在抽奖平台那么多为什么要自己做很多平台功能确实全抽奖、签到、大屏展示都有但有两个常见问题第一很多公司年会是在酒店宴会厅办的现场Wi-Fi质量捉摸不定一旦掉线整个环节就凉了第二把全公司员工名单传到第三方网站上很多人心里是打鼓的HR也会担心隐私问题。静态HTML方案把这两件事都解决了名单就在本地文件里数据不出电脑打开文件就是应用完全不依赖外网。1.2 对比在线平台和桌面程序静态方案赢在哪之前有个同事用Python写过一个抽奖工具功能没问题但年会现场那台电脑缺Python环境光装环境就花了十分钟。后来我们尝试过Electron打包的桌面软件体积倒是其次关键是那台老机器跑起来一卡一卡界面响应很慢。静态HTML就没有这些毛病双击打开就是应用代码就是文件本身天然不会出现环境问题。为了说清楚我整理了一份三种方案的对比对比项在线抽奖平台桌面程序静态HTML网络依赖强依赖现场网络不依赖不依赖部署难度注册、配置、适配安装运行环境打开即用数据隐私名单上传第三方数据本地数据本地定制能力受平台功能限制较强可改所有代码现场容错依赖平台稳定性依赖本机环境容错最高文件体积无通常几十MB以上几十KB静态HTML还有一个容易被忽视的优点可定制性极强。公司主题色、Logo、背景音乐、抽奖动画节奏全部自己改代码就能实现不需要等第三方平台更新功能。甚至可以塞入“开场倒计时”“中奖播报语音”这些定制需求。所以如果你的需求是“年会前两周快速搞定现场稳定优先”静态HTML几乎是性价比最高的选择。2. 核心设计一个抽奖软件到底在做什么2.1 名单与奖项的数据结构设计年会抽奖最常见的需求有三类名单导入、分奖项抽取、中奖名单展示。名单的来源通常是HR给的Excel表格第一版可以直接写在JS数组里后续再改成读取外部文件。数据结构建议这样设计// 员工名单从Excel手动转成这个格式 const allStaff [ { name: 张三, department: 研发部, id: 001 }, { name: 李四, department: 市场部, id: 002 }, // 后续按这个格式继续追加 ]; // 奖项配置包含奖项名、数量、抽取顺序 const awards [ { name: 一等奖, count: 3, order: 3 }, { name: 二等奖, count: 8, order: 2 }, { name: 三等奖, count: 20, order: 1 }, ];这里有两个细节要注意。第一奖项顺序必须能配置因为现场通常先抽三等奖再抽二等奖最后抽一等奖刺激感是层层递进的。第二名单字段里最好带上部门和工号中奖展示时显示“张三 研发部”现场更有仪式感也方便确认身份避免同名同姓引发的尴尬。我在实际开发中还加了一个tag字段用来标记员工的特殊属性。比如“最佳新人奖只能从入职一年内的员工里抽”抽奖前按tag过滤奖池即可代码改动很小但现场灵活性高了很多。年会策划那边临时提出“这个奖项要从特定部门抽”的需求我改一行配置就能上线。2.2 抽奖逻辑不重复抽中的实现方式很多人第一次写抽奖逻辑会犯一个经典错误每次从总名单里随机取一个人取完之后不把这人移除导致下一轮抽到同一个名字。年会抽奖必须区分“放回抽样”和“不放回抽样”。正确做法是抽奖前先把总名单复制一份作为“奖池”每抽中一个人就把他从奖池里移除。核心逻辑可以概括为这么几步初始化奖池从总名单中过滤掉所有已经中奖的人随机抽取在奖池中用随机数选一个下标移除中奖者把抽中的人从奖池中splice移除记录结果把中奖者追加到中奖名单数组。// 随机抽取一个不放回 function pickOne() { if (pool.length 0) return null; const idx Math.floor(Math.random() * pool.length); const winner pool.splice(idx, 1)[0]; winners.push(winner); return winner; }这里有一个容易被忽视的进阶需求当三等奖抽完20个人之后这20个人在二等奖抽奖时必须被排除。如果每一轮抽奖前都重新调用初始化奖池的逻辑从总名单里过滤已中奖名单这个需求就能自然满足。我建议把所有奖项抽奖前都统一走一次initPool传入当前奖项的过滤条件代码逻辑统一后边才不会出幺蛾子。2.3 大屏展示与现场操作节奏现场操作分两部分一部分是操作员在小屏幕上使用的控制区一部分是投影到大屏幕的展示区。因为整个程序是静态HTML推荐用同一个页面同时承载两个区域页面上方是大屏展示区页面右侧是控制按钮。按钮核心就三个下一轮抽奖、开始滚动、停止揭晓。为什么不是直接“抽一下出结果”因为年会抽奖需要让屏幕上的名字快速滚动制造紧张感再由主持人喊停或操作员按键停止。这个“先滚起来再停下”的过程是年会抽奖的气氛灵魂。名册滚动动画我用setInterval实现200毫秒刷新一次显示内容随着场内气氛升温滚动速度可以调到60到80毫秒效果更刺激。停止时再随机选取一个人用CSS做一个放大闪光的动画配合现场音乐达到高潮效果。整个过程代码量不大但节奏控制好了现场氛围会完全不一样。3. 代码落地从零写出可上线的静态抽奖页面3.1 单文件页面结构与全屏样式我建议把整个项目做成“单文件”也就是一个HTML文件内包含CSS和JS这样拷到哪都能用。页面布局采用全屏大背景中间是待抽奖区右侧是控制面板。核心HTML结构如下div idscreen div idcurrentAward二等奖/div div idnameArea span idrollingName准备开始/span /div /div div idcontrolPanel select idawardSelect/select button idbtnRoll开始滚动/button button idbtnStop停止揭晓/button button idbtnReset重置本轮/button button idbtnFullscreen全屏/button /div样式方面有几个实用建议。大屏文字要足够大姓名至少用96px以上保证坐在最后一排的人也能看清背景用深色或公司主题色白色文字对比度高。中奖后可以加一个金色边框的CSS动画现场视觉冲击力更强。我偏好用渐变背景加粒子效果但粒子效果不能太密集否则反而干扰名字显示。控制面板和展示区必须视觉分离。我通常用媒体查询在普通电脑屏幕上让控制面板靠右固定在大屏显示器上自动隐藏操作按钮。操作员手里可以再准备一个无线翻页笔配合键盘快捷键控制比鼠标更不易出错。3.2 随机抽取、滚动动画与结果揭晓接下来是核心JS逻辑。我会把“随机抽取”和“动画展示”分开写避免动画卡住时影响真实数据。完整逻辑如下// 全局状态 let pool []; let rollTimer null; let currentWinner null; // 初始化奖池从总名单里剔除已中奖者 function initPool() { const winnersSet new Set(winners.map(w w.id)); pool allStaff.filter(p !winnersSet.has(p.id)); } // 开始滚动只是名字快速切换不落定 function startRoll() { if (pool.length 0) { alert(奖池已空请确认是否还有未抽奖项); return; } rollTimer setInterval(() { const temp pool[Math.floor(Math.random() * pool.length)]; document.getElementById(rollingName).textContent temp.name; }, 80); } // 停止滚动真正决定中奖者 function stopRoll() { if (!rollTimer) return; clearInterval(rollTimer); rollTimer null; currentWinner pickOne(); document.getElementById(rollingName).textContent currentWinner.name; appendWinnerToWall(currentWinner, currentAwardName); }这段代码有两个容易被忽略的细节。第一开始滚动时显示的名字是用随机数临时取的不等于最终中奖者停止滚动时才真正从奖池里抽人。这样做的好处是用户可以享受“名字滚动”的过程而结果完全随机不会出现“看着名字滚动但最后中奖人不是屏幕上的名字”这种逻辑bug。第二stopRoll里才调用pickOne此时才从pool里splice这样保证后续抽奖不会重复。如果在startRoll时就把滚动中显示过的名字全部排除会大大缩小奖池抽奖就会失真。这个细节我当时调了很久才意识到。3.3 中奖墙与记录持久化中奖名单要实时追加到大屏下方的“中奖墙”上。我通常做成两列网格持续展示当前奖项已经抽出的名单。如果是三等奖要抽20人屏幕上最好能同时看到20个中奖者的名字而不是只显示最新一个。function appendWinnerToWall(winner, awardName) { const wall document.getElementById(winnerWall); const card document.createElement(div); card.className winner-card; card.innerHTML span classw-name${winner.name}/span span classw-dept${winner.department}/span span classw-award${awardName}/span; wall.appendChild(card); }这里有个现场经验中奖墙卡片不要做得太大否则一等奖还没抽前面三等奖的卡片已经占满大半屏。我的习惯是三等奖用小型列表二等奖用卡片一等奖用大号卡片视觉上有层次感也符合现场逐步推向最高潮的节奏。考虑到操作员可能误刷新页面我会把每一轮的中奖结果写入localStorage。刷新后页面自动恢复中奖名单已经抽过的人不会再次进入奖池这个功能在彩排和正式场之间切换时尤其有用。3.4 进一步静态HTML如何打包发布有同学问过静态HTML能不能像后端程序一样统一打包发布答案是可以的。如果你公司有内网服务器想在多个分会场同时访问同一个抽奖地址最简单的方式是用Spring Boot托管静态文件把HTML文件放到resources/static目录下然后打包成一个可执行jar包启动后访问localhost:8080就能看到抽奖页面。这种方式本质上是用后端容器托管静态资源对纯静态方案来说只是换了一种打开方式。如果你只是想在年会现场用一台电脑投屏完全不需要打包但如果你想做多会场联动、集中管理名单和抽奖结果那就需要一个后端来同步数据静态HTML更适合当作前端界面来用后端可以逐步加接口。4. 实战复盘那些容易翻车的细节4.1 中奖名单重复问题多半出在奖池没过滤这是抽奖软件最经典的翻车现场。根本原因往往不是随机算法有问题而是奖池没有过滤已经中奖的人。我在2.2节已经给出了正确做法但这里要说一个更隐蔽的情况多个奖项之间存在顺序时过滤范围要特别小心。举例一等奖、二等奖、三等奖都从全体员工里抽那么抽完三等奖后这20个人就不应该再出现在二等奖的奖池里。我在代码里统一封装了initPool每次抽奖前调用从总名单.filter掉所有winners中已存在的id这样按顺序抽奖天然就不会重复。而如果某个奖项有独立候选人范围就额外传入一个过滤函数代码仍然统一。4.2 中文名单乱码与隐藏字符静态HTML如果文件编码出了问题中文名单大概率变成乱码这在几百人盯着的屏幕上就是“事故现场”。解决方法有两个第一保存文件时选择UTF-8编码第二在HTML的head里明确声明meta charsetUTF-8。两个都要做缺一个都可能踩坑。如果你是从Excel复制名单到JS数组粘贴时经常带着看不见的BOM字符或特殊空格。我建议用正则过滤一遍不可见字符// 清理名单里的隐藏字符 const cleanStr str.replace(/[\u200B-\u200D\uFEFF]/g, ).trim();这个坑我踩过一次彩排时有个名字怎么都显示不出来排查了半天才发现是Excel粘贴时带入了一个零宽空格。看似很小的字符问题在正式年会上就会变成大麻烦。4.3 现场突发操作与数据备份年会现场最怕的不是软件bug而是人为操作失误。比如名单更新了但U盘里还是旧版比如主持人让多抽一个但对应奖项已经抽满比如误刷新导致当前状态丢失。我的建议是每次年会前做三件事抽奖名单、HTML文件、备份源文件放在同一个U盘的独立目录里同时邮箱给自己发一份在现场电脑上提前30分钟用真实名单完整跑一遍流程包括抽空某个奖项、重置、撤销等操作准备一份“紧急加人”方案现场临时要加人直接在JS数组里复制粘贴几行保存刷新即可不需要重启服务。另外抽奖过程中要保留一个“撤销本轮”按钮。万一主持人报错号码或者抽错部门操作员可以快速回退上一轮把中奖者从winners里移除重新放回奖池。这个按钮在彩排时可能用不上但正式场一旦出现人为失误它就是救命稻草。4.4 音效播放限制与多屏协作抽奖软件的音效通常用HTML的Audio来播放。但要注意浏览器的自动播放策略用户必须至少点击过一次页面之后才能播放声音否则会被浏览器拦截。解决方案是在操作员第一次点击“开始滚动”时主动创建一个AudioContext或者调用一次play()方法建立用户交互通道之后再播放音效就不会被拦截。多屏协作方面我建议在控制按钮上加一个“全屏”按钮调用document.documentElement.requestFullscreen()避免现场手忙脚乱去按F11。如果有多块屏幕可以打开两个浏览器窗口一个操作窗口一个投影窗口。操作窗口上把控制面板和展示区分离投影窗口只显示大屏区域这样按钮就不会出现在大屏上视觉效果更干净。如果你按上述方式把整个程序打包成一个文件整个项目的体积通常只有几十KB打开秒开完全不依赖任何外部资源。这也是它能在年会上走得稳的原因之一越简单的东西越难出问题。说实话这个项目本身并不复杂几百行代码就能搞定但真正考验人的不是代码而是对现场各种意外情况的预判。我做完这套静态HTML抽奖软件最大的收获是明白了一个道理在年会上抽奖程序的“稳定”和“准确”远比“炫酷”重要。如果你也想动手做一套建议至少提前两周做好第一版然后拉着几个同事用真实名单多试几轮把抽空奖池、误刷新、名单撤回这些情况全部演练一遍。等到年会真正开始时你站在控制台边上看着名字稳稳当当地停下来就会明白这套看起来朴素的静态HTML页面比什么花哨的在线平台都让人安心。本文还有配套的精品资源点击获取