年会抽奖小程序

一个纯前端的年会抽奖页面，成员名字组成 3D 旋转球体，点击即可抽奖。在网上一个不错的抽奖程序基础上改良而来。

• 不需要安装依赖，不需要构建，用浏览器打开就能用
• 已中奖的人会标成黄色，后续轮次不会被重复抽中
• 抽奖记录保存在浏览器本地，刷新或重新打开页面后仍然保留

快速开始

直接用浏览器打开 index.html 即可：

open index.html

如果需要在局域网内的其他设备（比如投屏电脑）上访问，可以起一个本地静态服务器：

python3 -m http.server 8080
# 访问 http://localhost:8080

配置抽奖名单

在 js/allMembers.js 中填入成员，格式如下：

var allMembers = [
  { phone: 'No.1', name: '张三' },
  { phone: 'No.2', name: '李四' },
];

• name：显示在球体上的名字
• phone：编号，会和名字一起显示在中奖结果里（例如 No.1-张三）
• name + phone 组合起来用于区分成员，同名的人请用不同编号

如果手上只有一份名字列表，可以在浏览器控制台里运行下面的代码，生成 js/allMembers.js 的完整内容并复制到剪贴板：

names = ['张三', '李四', '王五', '赵二'];
copy(`var allMembers = ${JSON.stringify(names.map((name, i) => ({ phone: `No.${i + 1}`, name })), null, 2)};\n`);

抽奖流程

1. 在右下角输入框中填写本轮要抽取的人数
2. 点击「开始」，球体加速旋转（此时仍可修改人数）
3. 点击「停!」，显示本轮中奖名单
4. 再次点击「开始」进入下一轮

其他操作：

• 中奖记录：右上角按钮，查看每一轮的中奖时间和名单，点击弹层即可关闭
• 清空抽奖记录：清除所有中奖记录，所有人重新进入奖池（操作前会二次确认）
• 读取记录：从浏览器本地存储重新载入中奖记录
• 滚动鼠标滚轮可以放大或缩小球体，拖动可以旋转

注意事项

• 抽奖记录存在当前浏览器的 localStorage 中。换浏览器、使用无痕模式或清除浏览器数据都会导致记录丢失，正式抽奖请用同一个浏览器，并及时记录结果。
• 正式开始前建议先点击「清空抽奖记录」，把彩排时产生的数据清掉。
• 左上角的文字在 index.html 的 .anouncement 中修改，背景图是 img/icon-wall.jpg。

项目结构

├── index.html            # 页面入口
├── css/
│   ├── reset.css
│   └── main.css          # 页面及按钮样式
├── img/                  # 背景图等素材
└── js/
    ├── allMembers.js     # 抽奖名单
    ├── index.js          # 抽奖逻辑
    ├── vue.global.prod.js
    └── tagcanvas.min.js

技术栈

• Vue 3.5.43
• TagCanvas 2.11：3D 标签云球体