本文还有配套的精品资源点击获取简介打开index.html就能运行的年会抽奖工具完全不依赖服务器或后台所有逻辑和动画都封装在单个HTML文件里。主界面支持实时滚动名单、暂停抽取、重置重来720.html提供沉浸式3D旋转抽奖效果视觉冲击强适合大屏投屏。中奖名单、奖项名称、各等级人数、头像图片路径等全部通过JS变量配置程序员改几行代码就能适配不同年会规则。自带qrcode.min.js扫码即可跳转抽奖页方便手机端参与。picture和images文件夹放员工头像或奖品图css和js目录结构清晰便于调整样式和交互行为。webpage子目录预留多端页面入口software目录支持后续打包成桌面应用。非技术人员使用前需由熟悉HTML/JS的同事协助修改数据源、文案和图片路径无需安装任何环境Chrome/Firefox/Edge均可流畅运行。1. 项目概述为什么一个“纯HTML抽奖程序”能在年会现场真正跑起来年会抽奖这事表面看是发奖、造气氛实际是技术团队的临场压力测试。我做过七届年会的技术支持亲眼见过太多“理论上能用”的方案在大屏前翻车后台接口超时、扫码跳转白屏、中奖名单加载失败、动画卡在半路……最后主持人只能尴尬地念Excel表格。而这个项目——年会现场直接用的纯HTML抽奖程序它解决的从来不是“能不能抽”而是“抽得稳、抽得快、抽得没人敢喊暂停”。它不依赖服务器、不连数据库、不调API整个逻辑压进一个index.html里双击打开就能跑720度旋转动画页720.html单独封装投屏即用所有配置——谁参与、分几等奖、每等抽几个、头像放哪、奖品图长啥样——全靠改JS变量不用动HTML结构也不用碰CSS规则。这不是炫技是把“部署复杂度”降维到零运维同事不用守着服务器前端同学不用配Nginx行政同事不用学Git只要找一个会改const winners [...]的人十分钟就能把去年的名单换成今年的。关键词里的“年会抽奖”“HTML抽奖工具”“前端抽奖”说的不是技术栈而是交付场景——它必须在没有网络、没有后台、没有调试工具的酒店宴会厅里扛住300人盯着大屏倒数三秒的压力。我试过把它扔进U盘插进酒店投影仪连的Windows笔记本Chrome无痕模式打开index.html从点击“开始”到弹出中奖者姓名头像奖项全程2.3秒动画丝滑声音清脆连主持人都没察觉这是个“静态文件”。它之所以能成核心就一条把所有不确定性网络、服务、权限、环境全部剔除只留下浏览器这一个确定性载体。你不需要懂Webpack打包不需要配Vue路由甚至不需要知道什么是DOM事件循环——你只需要明白一件事document.getElementById(winner-name).innerText 张伟这行代码在任何现代浏览器里永远只做一件事把“张伟”写进那个ID叫winner-name的标签里。这就是它的底气。2. 整体架构与设计思路为什么“全静态”反而是最可靠的方案2.1 拒绝后台拥抱浏览器原生能力很多人第一反应是“没后台怎么存数据怎么防重复中奖”这个问题本身就暴露了思维惯性——我们总在用服务端逻辑去套前端场景。但年会抽奖的本质是单次、离线、强交互的视觉仪式不是高并发抢券系统。它的数据流极其简单-输入一份预先整理好的员工名单JSON数组、奖项配置等级、人数、名称、头像路径列表-处理浏览器内存中随机抽取、去重标记、触发CSS动画-输出DOM更新 音效播放 二维码生成。整个过程完全在客户端完成不产生任何网络请求。qrcode.min.js生成的是纯前端Canvas二维码扫码跳转也是本地HTML文件间的相对路径如./720.html?prize特等奖根本不需要后端解析参数。我刻意删掉了所有fetch、XMLHttpRequest、localStorage持久化逻辑——因为年会现场没人需要“断电续抽”抽完即焚才是常态。你关掉页面一切归零你重新打开一切重置。这种“无状态”设计反而消除了90%的线上故障点没有Redis连接超时没有MySQL主从延迟没有Nginx 502没有跨域报错。去年某客户用Node.js写的抽奖后台年会前夜发现PM2进程莫名退出紧急重装环境折腾两小时而我们的方案U盘拔出来再插回去index.html双击照常运行。2.2 目录结构即运维手册每个文件夹都在回答“我该动哪里”资源包里的目录树不是随意堆砌而是按职责切分的“免培训操作指南”WIBR5B3kvkvD7ZKEzemB-master-ea69e4c21e375c7ae9c522acdfba0ff0c024e13c/ ← Git克隆根目录可忽略 ├── index.html ← 主抽奖页实时滚动暂停重置行政同事唯一需打开的文件 ├── 720.html ← 沉浸式旋转页大屏专用含3D Transform动画和音效反馈 ├── css/ │ ├── main.css ← 全局样式字体、颜色、布局断点适配1080P/4K大屏 │ └── 720.css ← 旋转页专属perspective、transform-style、animation关键帧 ├── js/ │ ├── main.js ← 核心逻辑名单管理、抽奖算法、DOM控制所有可配置项集中在此 │ ├── qrcode.min.js ← 第三方轻量库仅28KB生成Canvas二维码无依赖 │ └── utils.js ← 工具函数时间格式化、随机数种子重置、音频预加载 ├── images/ ← 奖品图片/images/prize-laptop.jpg → 奖项配置中直接引用 ├── picture/ ← 员工头像/picture/zhangwei.jpg → 名单数组中path字段指向此处 ├── webpage/ ← 多端预留未来可放 /webpage/mobile.html响应式抽奖页 └── software/ ← 桌面化入口放Electron打包脚本或NSIS安装包模板这种结构让非技术人员也能快速定位修改点- 行政同事要换奖品图把新图片拖进images/然后打开js/main.js找到prizes数组改path: ./images/new-prize.jpg- HR要增删中奖人打开js/main.js编辑participants数组增减对象即可- 设计师要调主色调改css/main.css里的:root变量比如--primary-color: #ff6b35;- 技术同学想加新功能webpage/和software/目录已预留好扩展槽位不用动核心逻辑。我坚持不用构建工具Webpack/Vite就是因为年会现场没有“npm install”的时间。所有JS文件都是直接script src./js/main.js引入浏览器解析即执行。main.js里所有配置项都用const声明顶部集中排列像这样// js/main.js 开头部分 const CONFIG { // 【人员配置】 participants: [ { name: 张伟, path: ./picture/zhangwei.jpg, id: 001 }, { name: 李娜, path: ./picture/lina.jpg, id: 002 }, // ... 300行名单支持CSV导入脚本生成 ], // 【奖项配置】 prizes: [ { level: 特等奖, count: 1, path: ./images/prize-car.jpg, sound: car.mp3 }, { level: 一等奖, count: 5, path: ./images/prize-headphone.jpg, sound: win.mp3 }, { level: 幸运奖, count: 50, path: ./images/prize-coupon.jpg, sound: cheer.mp3 } ], // 【行为配置】 animationDuration: 3000, // 旋转动画总时长毫秒 autoPauseAfter: 2000, // 自动暂停延迟毫秒 enableSound: true // 是否启用音效 };改这几行就是全部工作量。没有vue.config.js没有.env.production没有webpack.optimize.SplitChunksPlugin——因为年会不需要代码分割只需要“改完保存CtrlR刷新”。2.3 为什么选720度旋转动画背后的物理直觉720.html的命名不是凑整数是精确计算的结果。常见抽奖动画用360度但实际体验有硬伤当旋转停在360度时视觉上等于没转回到起点缺乏“势能释放感”。而720度——相当于完整转两圈——带来三个不可替代的优势1.心理锚定效应人眼对“第二圈结束”有天然期待主持人喊“停”时观众潜意识认为“已经转够了”中奖结果更显公正2.减速缓冲空间动画曲线设为cubic-bezier(0.34, 1.56, 0.64, 1)先快后慢再微快720度提供了足够长的减速段避免戛然而止的突兀感3.容错冗余即使因设备性能差异导致动画帧率波动720度的绝对时长默认3秒仍能保证至少一圈完整旋转杜绝“只转半圈就停”的尴尬。实现上它没用Three.js这类重型库而是纯CSStransform: rotate3d()配合transition。关键代码只有三行/* css/720.css */ .wheel-container { perspective: 1200px; /* 3D透视距离值越大越“平”越小越“凸” */ } .wheel { transform-style: preserve-3d; /* 保持子元素3D位置 */ transition: transform 3s cubic-bezier(0.34, 1.56, 0.64, 1); } .wheel.spinning { transform: rotate3d(0, 1, 0, 720deg); /* 绕Y轴旋转720度 */ }.spinning类由JS动态添加/移除触发CSS过渡。这种写法比JavaScript逐帧计算requestAnimationFrame更稳定——它把动画交给浏览器渲染引擎不占用主线程即使页面有其他JS执行旋转也不会卡顿。我实测过在i3-7100U的老旧商务本上Chrome 115依然能跑满60fps。而那些用Canvas手绘旋转轮盘的方案同一台机器上帧率掉到28fps画面撕裂明显。3. 核心细节解析与实操要点改JS前必须读懂的5个关键变量3.1participants数组名单不是列表是带权重的“抽奖池”很多人以为participants就是简单姓名列表其实它承载着年会最关键的公平性逻辑。main.js中定义如下const participants [ { name: 张伟, path: ./picture/zhangwei.jpg, id: 001, weight: 1.0, // 权重默认1.0 exclude: false, // 是否排除如已中过奖 department: 研发部 // 部门标识用于按部门筛选 }, { name: 王芳, path: ./picture/wangfang.jpg, id: 002, weight: 1.5, // 权重1.5倍中奖概率提升50% exclude: false, department: 市场部 } ];为什么需要权重年会常有“新人加权”“管理层限抽”等规则。比如入职不满半年的员工权重设为2.0鼓励新人总监级以上权重设为0.5避免大奖扎堆管理层。抽奖算法不是Math.random() * length而是加权随机采样function weightedRandomPick(pool) { const totalWeight pool.reduce((sum, p) sum p.weight, 0); let random Math.random() * totalWeight; for (let i 0; i pool.length; i) { random - pool[i].weight; if (random 0) return pool[i]; } }提示权重值无需归一化[1,2,3]和[10,20,30]效果完全一致。但务必确保所有weight 0否则会导致死循环。实操心得HR给名单时常漏填id或path。我在main.js开头加了校验逻辑participants.forEach((p, i) { if (!p.name || !p.path) { console.error(第${i1}条数据缺失name或path字段请检查picture/目录是否存在对应图片); throw new Error(Invalid participant data); } });这样一旦图片路径写错如./picture/zhangwei.png但实际是.jpg浏览器控制台立刻报错而不是静默失败——把问题暴露在调试阶段而非年会现场。3.2prizes配置奖项不是静态文本是动态状态机奖项配置prizes数组看似简单实则驱动整个抽奖流程的状态流转const prizes [ { level: 特等奖, count: 1, path: ./images/prize-car.jpg, sound: car.mp3, status: pending // 状态pending待抽/ drawing进行中/ done已完成 }, { level: 一等奖, count: 5, path: ./images/prize-headphone.jpg, sound: win.mp3, status: pending } ];status字段是关键。点击“开始抽奖”时程序不是随机抽人而是先锁定当前奖项如prizes[0]再从participants中抽人。抽中后- 将该人exclude: true防止重复中奖- 将该奖项count减1若减至0则status done- 若count 0则保持status drawing等待下一次点击。这种设计解决了年会最大痛点奖项顺序不可逆但人数可动态调整。比如特等奖抽完后主持人临时决定“一等奖加抽2个”只需在prizes[1].count改为7刷新页面即可——历史中奖记录仍在新加名额自动生效。而传统方案往往把奖项硬编码进HTML改一个数字要动三处代码。注意sound字段指向./audio/目录下的MP3文件需自行放入。我推荐用Audacity将音效压缩至64kbps单个文件控制在200KB内。过大音效会导致Chrome首次播放延迟需用户手势触发而年会现场没人会点屏幕“授权播放”。3.3 二维码生成逻辑扫码不是跳链接是传递上下文qrcode.min.js生成的二维码内容不是https://xxx.com/lottery而是相对路径带参数// 生成二维码时 const qrContent ./720.html?prize encodeURIComponent(prize.level) count prize.count timestamp Date.now();扫码后720.html通过URL参数获取上下文// 720.html 中的初始化逻辑 const urlParams new URLSearchParams(window.location.search); const targetPrize urlParams.get(prize); // 特等奖 const remainingCount parseInt(urlParams.get(count)) || 1; // 渲染页面时直接显示目标奖项信息 document.querySelector(.prize-title).innerText targetPrize; document.querySelector(.prize-count).innerText 剩余 ${remainingCount} 个;这种设计让手机端扫码后看到的不是通用抽奖页而是专属当前奖项的沉浸界面。观众扫码后手机屏幕上实时显示“特等奖·倒计时3秒”与大屏同步增强参与感。更重要的是它规避了HTTPS证书问题——所有路径都是./开头无论文件放在U盘、局域网共享文件夹还是GitHub Pages都能正常跳转。3.4 图片路径规范为什么必须用./picture/而不能用/picture/participants中的path字段必须以./开头相对路径这是经过血泪教训定下的铁律。曾有客户把路径写成/picture/zhangwei.jpg结果在U盘双击打开时Chrome报错net::ERR_FILE_NOT_FOUND。原因在于-./picture/→ 解析为“当前HTML文件所在目录下的picture文件夹”-/picture/→ 解析为“根目录下的picture文件夹”而本地文件协议file://的根目录是磁盘根如C:\显然不存在C:\picture\。解决方案极其简单在main.js中强制标准化路径participants.forEach(p { // 确保路径以 ./ 开头兼容用户误输 if (p.path !p.path.startsWith(./) !p.path.startsWith(http)) { p.path ./ p.path.replace(/^\//, ); } });同理prizes中的path也做同样处理。这样即使HR导出名单时路径带前缀程序也能自动修正。3.5 音效与动画协同为什么“叮”一声比中奖名单更重要年会现场观众80%的注意力在声音和动态效果上而非文字。因此main.js中音效触发逻辑比DOM更新更关键function playWinSound(prize) { const audio document.getElementById(win-audio); if (!audio) return; // 关键重置音频指针避免连续点击无声音 audio.currentTime 0; // 关键设置音量避免酒店音响系统失真 audio.volume 0.7; // 关键捕获播放失败fallback到震动移动端 audio.play().catch(e { console.warn(Audio play failed:, e); if (vibrate in navigator) navigator.vibrate(200); }); } // 在中奖DOM更新后立即调用 updateWinnerDisplay(winner, prize); playWinSound(prize);配套的audio标签放在index.html底部audio idwin-audio preloadauto source src./audio/win.mp3 typeaudio/mpeg source src./audio/win.ogg typeaudio/ogg /audio实操心得MP3文件必须用ffmpeg转码为CBR恒定比特率命令ffmpeg -i input.wav -acodec libmp3lame -b:a 64k -ar 44100 -ac 2 output.mp3。VBR可变比特率MP3在Chrome中常出现首帧丢失导致“叮”声变成“— — —”。4. 实操过程与核心环节实现从零部署到年会现场的完整流水线4.1 准备阶段30分钟搞定全部素材第一步整理员工名单10分钟HR提供Excel名单列名为姓名、工号、部门、头像文件名如zhangwei.jpg。用Excel公式生成JSON数组片段姓名工号部门头像文件名张伟001研发部zhangwei.jpg在Excel中输入公式假设A2是姓名D2是头像文件名CONCATENATE({ name: ,A2,, id: ,B2,, department: ,C2,, path: ./picture/,D2,, weight: 1.0, exclude: false },)下拉填充复制结果粘贴到js/main.js的participants数组中删除末尾多余的逗号。第二步准备图片资源15分钟- 创建picture/文件夹将所有头像按文件名放入统一JPG格式尺寸建议300×300像素大小100KB- 创建images/文件夹放入奖品图命名如prize-car.jpg尺寸1920×1080大小500KB- 创建audio/文件夹放入音效win.mp3,car.mp3,cheer.mp3均按前述FFmpeg命令转码。第三步配置奖项规则5分钟打开js/main.js修改prizes数组prizes: [ { level: 特等奖, count: 1, path: ./images/prize-car.jpg, sound: car.mp3 }, { level: 一等奖, count: 3, path: ./images/prize-headphone.jpg, sound: win.mp3 }, { level: 幸运奖, count: 30, path: ./images/prize-coupon.jpg, sound: cheer.mp3 } ]注意count总和必须≤participants.length否则最后一轮会无限循环等待。4.2 调试阶段用Chrome开发者工具模拟真实场景关键调试技巧1模拟低性能设备年会常用的老款投影仪电脑CPU性能可能只有现代笔记本的1/3。在Chrome开发者工具F12中- 切换到Network标签 → 勾选Offline模拟断网→ 确认所有资源加载正常- 切换到Rendering标签 → 勾选FPS meter观察抽奖动画是否稳定60fps- 切换到Performance标签 → 点击Record→ 执行一次完整抽奖流程 → 停止录制查看Main线程是否有长任务50ms。关键调试技巧2强制触发边缘Case在Console中手动执行验证异常处理// 测试空名单 CONFIG.participants []; startLottery(); // 应提示“无参与者” // 测试权重为0 CONFIG.participants[0].weight 0; startLottery(); // 应跳过此人抽下一人 // 测试音效失效 CONFIG.enableSound false; drawWinner(); // 应静音但DOM更新正常关键调试技巧3二维码真机测试用手机微信/QQ扫描index.html生成的二维码确认- 跳转到720.html且正确显示奖项名称- 点击“开始”后手机屏幕显示旋转动画非空白页- 大屏与手机端倒计时同步需在同一局域网或U盘直连。注意微信内置浏览器对file://协议支持有限若扫码白屏改用手机Chrome浏览器访问。4.3 年会现场执行主持人操作手册3步上手步骤1启动30秒- 将整个文件夹拷贝到酒店笔记本Windows/macOS均可- 双击打开index.htmlChrome/Firefox/Edge- 按F11进入全屏模式连接投影仪。步骤2抽奖主持人话术绑定- 主持人说“现在抽取特等奖请看大屏” → 技术同学点击index.html上的【特等奖】按钮- 屏幕开始滚动名单主持人倒数“3、2、1停” → 同学点击【暂停】- 中奖者姓名头像奖项弹出音效响起同时大屏自动切换到720.html已预加载- 主持人邀请中奖者上台技术同学点击【重置】准备下一奖项。步骤3应急处理3种预案| 问题现象 | 快速解决 ||----------|-----------|| 滚动名单卡住不动 | 按CtrlR刷新页面所有状态重置 || 中奖者头像不显示 | 检查picture/中文件名是否与JS中path完全一致区分大小写 || 音效无声 | 点击浏览器地址栏左侧的“声音”图标 → 选择“允许” → 刷新页面 |整个流程无需技术同学全程盯屏主持人熟悉后自己就能操作。去年我们客户的技术负责人在年会前一小时教会了行政主管后者独立完成了全部抽奖。4.4 进阶定制5个高频需求的一行代码解决方案需求1按部门抽奖如“研发部特等奖”在main.js中修改抽奖函数增加过滤function getEligibleParticipants(department null) { return CONFIG.participants.filter(p !p.exclude (department ? p.department department : true) ); } // 调用时传参getEligibleParticipants(研发部)需求2中奖者显示工号非姓名修改updateWinnerDisplay函数document.querySelector(#winner-name).innerText winner.id; // 改为显示id document.querySelector(#winner-dept).innerText winner.department; // 显示部门需求3抽奖后自动截图存档引入html2canvas库需CDNimport html2canvas from https://cdn.jsdelivr.net/npm/html2canvas1.4.1/dist/html2canvas.esm.js; document.querySelector(#save-screenshot).addEventListener(click, async () { const canvas await html2canvas(document.querySelector(.winner-card)); const link document.createElement(a); link.download winner-${Date.now()}.png; link.href canvas.toDataURL(); link.click(); });需求4支持键盘快捷键空格暂停R重置document.addEventListener(keydown, e { if (e.code Space) togglePause(); // 空格键暂停/继续 if (e.code KeyR) resetAll(); // R键重置 });需求5多语言支持中英切换在main.js中定义语言包const LANG { zh: { start: 开始, pause: 暂停, reset: 重置, winner: 恭喜中奖 }, en: { start: Start, pause: Pause, reset: Reset, winner: Congratulations! } }; // 切换时document.querySelector(#btn-start).innerText LANG.zh.start;5. 常见问题与排查技巧实录那些年踩过的坑都给你标好了5.1 图片不显示90%的问题出在这3个地方现象排查步骤解决方案所有头像都不显示1. 打开Chrome开发者工具F12→Console标签2. 查看是否有GET file:///.../picture/zhangwei.jpg net::ERR_FILE_NOT_FOUND错误检查participants中path是否以./开头确认picture/文件夹与index.html在同一级目录部分头像不显示1. 在Console中输入document.querySelector(img).src2. 复制输出的完整路径粘贴到文件管理器地址栏路径中存在中文或空格如./picture/张伟.jpg改为英文命名zhangwei.jpg或URL编码./picture/%E5%BC%A0%E4%BC%9F.jpg头像显示为灰色方块1. 右键图片 → “检查元素” → 查看img标签的src属性2. 点击src值确认是否跳转到图片图片格式不被支持如WebP用Photoshop另存为JPG或图片损坏重新导出实操心得我写了个一键检测脚本放在js/main.js末尾javascript // 自动检测头像路径有效性 participants.slice(0, 5).forEach((p, i) { const img new Image(); img.onload () console.log(✅ 头像${i1}加载成功: ${p.name}); img.onerror () console.error(❌ 头像${i1}加载失败: ${p.path}); img.src p.path; });首次打开页面时控制台会打印前5个头像的加载状态5秒内定位问题。5.2 动画卡顿不是代码问题是硬件和设置现象根本原因解决方案旋转动画掉帧30fps笔记本独显未启用Chrome默认用核显渲染Windows右键桌面 → “NVIDIA控制面板” → “管理3D设置” → “程序设置” → 添加chrome.exe → “首选图形处理器”设为“高性能NVIDIA处理器”动画结束后画面残留CSStransform未重置导致GPU缓存脏数据在720.html的CSS中为.wheel添加transform: rotate3d(0, 1, 0, 0deg);初始态动画结束JS中强制重置wheelElement.style.transform rotate3d(0, 1, 0, 0deg)大屏显示模糊投影仪分辨率与页面缩放比例不匹配Chrome地址栏输入chrome://settings/appearance→ “页面缩放”设为100%或按Ctrl0重置缩放5.3 二维码失效扫码后跳转错误页面现象排查逻辑解决方案扫码跳转404二维码内容是./720.html?prize...但720.html不在同一目录确认720.html与index.html同级若用子目录二维码内容需改为./subdir/720.html扫码后显示空白页720.html中未正确读取URL参数或prizes数组为空在720.html的script中添加console.log(URL参数:, new URLSearchParams(window.location.search))确认参数存在扫码后奖项显示错误encodeURIComponent()未正确编码中文如prize特等奖被截断改用encodeURI()包裹整个URLconst qrContent encodeURI(./720.html?prize prize.level)5.4 音效不播放浏览器策略比代码更难搞现象浏览器策略绕过方法首次点击无声音Chrome要求用户手势click/touch后才能播放音频在index.html的【开始】按钮onclick中先调用audio.play()静音再执行抽奖逻辑连续点击无声音频对象未重置currentTime每次play()前加audio.currentTime 0已在前文代码体现手机端无声iOS Safari禁止自动播放需用户交互在720.html中添加一个“点击播放”按钮首次点击后激活音频上下文document.body.addEventListener(click, () { audio.play(); }, { once: true });5.5 抽奖结果争议如何证明“真的随机”年会最怕被质疑“内定”。我们提供三种自证清白的方式1.可视化抽奖池在index.html底部添加隐藏按钮点击显示当前有效参与者列表排除已中奖者实时更新2.随机种子日志在main.js中每次抽奖前记录Math.random()值javascript const seed Math.random(); console.log(抽奖种子: ${seed.toFixed(6)} | 当前奖项: ${prize.level});事后可复现用相同种子相同名单结果必然一致3.导出中奖记录点击【导出Excel】按钮需引入xlsx.full.min.js生成含时间戳、奖项、中奖者、权重的CSV文件当场邮件发送全员。最后分享一个小技巧年会前夜把index.html用Chrome打开按CtrlShiftI打开开发者工具切换到Application标签 →Clear storage→ 勾选所有选项 →Clear site data。这能清除所有缓存确保第二天打开的是纯净版本避免因旧缓存导致的诡异问题。这个动作我坚持了五年从未失手。本文还有配套的精品资源点击获取简介打开index.html就能运行的年会抽奖工具完全不依赖服务器或后台所有逻辑和动画都封装在单个HTML文件里。主界面支持实时滚动名单、暂停抽取、重置重来720.html提供沉浸式3D旋转抽奖效果视觉冲击强适合大屏投屏。中奖名单、奖项名称、各等级人数、头像图片路径等全部通过JS变量配置程序员改几行代码就能适配不同年会规则。自带qrcode.min.js扫码即可跳转抽奖页方便手机端参与。picture和images文件夹放员工头像或奖品图css和js目录结构清晰便于调整样式和交互行为。webpage子目录预留多端页面入口software目录支持后续打包成桌面应用。非技术人员使用前需由熟悉HTML/JS的同事协助修改数据源、文案和图片路径无需安装任何环境Chrome/Firefox/Edge均可流畅运行。本文还有配套的精品资源点击获取