一个基于 HTML/CSS/JS 的转盘抽奖网页程序，支持个性化配置、本地存储、多模式切换、多设备同步。
- 🎨 可视化转盘 - Canvas 绘制，流畅旋转动画，文字在上图标在下
- ⚙️ 高度可配置 - 自定义选项、权重、颜色、图标
- 💾 智能存储 - 本地存储 + 多设备同步（可选 PHP 后端）
- 🔄 多模式 - URL 参数切换不同抽奖场景
- 📱 响应式 - 支持桌面端和移动端（已优化手机端渲染）
- 🚀 零依赖 - 纯静态文件，可选 PHP 后端
- 🎯 双场景支持 - 抽奖品、抽人两种应用场景
- 🌐 多设备同步 - PHP 后端支持配置跨设备同步
- ✨ 中奖可视化 - 绿色徽章显示抽中次数
适用于各类活动、促销、年会等场景，设置奖品列表进行抽奖。
示例配置：
- 一等奖：iPhone 15
- 二等奖：京东礼品卡
- 三等奖：精美笔记本
- 谢谢参与
适用于公司、班级、团队等场景，设置人员名单进行随机抽取。
典型应用：
- 公司年会抽奖员工
- 班级随机点名回答问题
- 团队随机分配任务
- 会议随机选择发言人
使用方法：
- 点击「导入」按钮，批量粘贴人员名单（每行一个姓名）
- 设置权重控制被抽中的概率
- 设置最大中奖次数，避免重复抽中同一人
- 点击「重置」按钮可开始新一轮抽取
- 下载
src目录 - 双击打开
index.html - 即可开始使用
步骤：
- Fork 本仓库到你的 GitHub 账号
- 进入仓库设置：
Settings→Pages - Source 选择
Deploy from a branch - Branch 选择
main，目录选择/src - 点击
Save - 等待部署完成，访问
https://你的用户名.github.io/lottery/
优点：免费、自动 HTTPS、无需服务器
步骤：
- 访问 Vercel 并登录
- 点击
New Project - 导入你的 GitHub 仓库
- Framework Preset 选择
Other - Root Directory 设置为
src - 点击
Deploy - 等待部署完成，获得访问链接
优点：免费、自动 HTTPS、全球 CDN、自定义域名
步骤：
- 访问 Netlify 并登录
- 点击
Add new site→Deploy manually - 将
src目录拖拽上传 - 等待部署完成，获得访问链接
或者连接 GitHub：
- 点击
Add new site→Import an existing project - 选择你的 GitHub 仓库
- Publish directory 设置为
src - 点击
Deploy site
优点：免费、自动 HTTPS、持续部署
步骤：
- 购买支持 PHP 的虚拟主机或使用已有主机
- 通过 FTP 或主机控制面板上传文件
- 将
src目录下所有文件上传到网站根目录或子目录 - 确保
user/目录有写入权限（chmod 755） - 访问你的域名即可使用
优点：完全控制、可绑定自有域名、支持多设备配置同步
多设备同步使用方法：
https://your-domain.com/lottery/index.html?user=张三
https://your-domain.com/lottery/index.html?user=张三&mode=team1
https://your-domain.com/lottery/index.html?user=张三&mode=class1
参数说明：
user参数：指定 JSON 配置文件名（如user/张三.json）mode参数：指定在该 JSON 文件中使用哪个 mode 配置- 一个 user 的 JSON 文件可以包含多个 mode 配置
数据结构：
{
"user": "张三",
"modes": {
"default": { "title": "...", "prizes": [...], "updatedAt": "..." },
"team1": { "title": "...", "prizes": [...], "updatedAt": "..." },
"class1": { "title": "...", "prizes": [...], "updatedAt": "..." }
},
"updatedAt": "..."
}使用场景：
- 同一用户在不同设备上使用相同链接，配置自动同步
- 一个用户可以创建多个独立的抽奖模式（如团队抽奖、班级抽奖、活动抽奖）
- 如果指定的 mode 不存在，保存时会自动创建
- 无
user参数时，使用本地存储（仅当前设备可用）
Python 方式：
cd src
python -m http.server 8080
# 访问 http://localhost:8080Node.js 方式：
npx serve src
# 访问 http://localhost:3000优点：本地测试、无需联网
| 方式 | 费用 | HTTPS | 自定义域名 | 多设备同步 | 技术难度 |
|---|---|---|---|---|---|
| GitHub Pages | 免费 | ✅ | ✅ | ❌ | ⭐ |
| Vercel | 免费 | ✅ | ✅ | ❌ | ⭐ |
| Netlify | 免费 | ✅ | ✅ | ❌ | ⭐ |
| 虚拟主机(PHP) | 付费 | ✅ | ✅ | ⭐⭐ | |
| 本地服务器 | 免费 | ❌ | ❌ | ❌ | ⭐ |
注意：GitHub Pages / Vercel / Netlify 不支持 PHP，无法使用多设备同步功能。如需多设备同步，请使用传统虚拟主机部署。
通过 URL 参数切换不同抽奖模式：
https://your-domain.com/lottery/index.html?mode=team1
https://your-domain.com/lottery/index.html?mode=team2
https://your-domain.com/lottery/index.html?mode=class1
https://your-domain.com/lottery/index.html?mode=company
每个模式拥有独立的配置存储。
- 点击「开始抽奖」按钮进行抽奖
- 转盘旋转后显示中奖结果
- 结果自动保存历史记录
点击右上角「⚙」按钮打开设置面板：
- 标题修改 - 自定义抽奖标题
- 选项管理 - 添加/编辑/删除/清空/导入
- 权重设置 - 0-100 百分比概率控制
- 最大中奖次数 - 控制每个选项最多被抽中多少次
- 图标选择 - 12种预制图标
- 颜色选择 - 8种预制颜色
- 重置功能 - 重置中奖次数，开始新一轮
- 点击编辑按钮后自动滚动到编辑区域
- 编辑完成后使用设置面板底部的「保存」按钮统一保存
- 编辑区域的单独保存/取消按钮已移除
| 属性 | 说明 |
|---|---|
| 名称 | 选项显示名称（奖品名或人名） |
| 图标 | 预制图标（可选） |
| 颜色 | 扇形背景颜色 |
| 权重 | 0-100 百分比概率，0=永不中奖，100=必中 |
| 最大中奖次数 | 该选项最多可被抽中多少次 |
权重采用百分比制（0-100）：
- 权重 0：该选项永远不会被抽中
- 权重 100：该选项必定被抽中（100%概率）
- 权重 10-50：正常参与随机抽取
- 每个选项可设置最大中奖次数（默认为1）
- 达到最大中奖次数后，该选项不再参与抽奖
- 点击「重置」按钮可清零所有中奖次数，开始新一轮
点击「导入」按钮，可批量粘贴选项名称：
- 每行一个名称
- 名称不超过10字
- 最多支持批量导入多个选项
- 适用于抽人场景快速导入人员名单
- 已抽中的选项显示绿色背景徽章
- 徽章显示抽中次数（次数为0时不显示）
- 用户指示器与模式指示器风格统一
lottery/
├── doc/ # 文档目录
│ ├── 需求文档.md
│ ├── 设计文档.md
│ └── 使用说明.md
├── src/ # 源码目录（部署此目录）
│ ├── index.html # 主页面
│ ├── css/
│ │ ├── style.css # 主样式
│ │ ├── turntable.css # 转盘样式
│ │ └── modal.css # 弹窗样式
│ ├── js/
│ │ ├── utils.js # 工具函数
│ │ ├── storage.js # 存储管理（支持本地/服务端）
│ │ ├── config.js # 配置管理
│ │ ├── turntable.js # 转盘引擎
│ │ └── app.js # 主程序
│ ├── api/ # PHP API（多设备同步）
│ │ ├── save.php # 保存配置
│ │ ├── load.php # 加载配置
│ │ └── .htaccess # API 保护
│ ├── images/ # 图片资源
│ └── user/ # 用户配置目录
│ ├── example.json # 配置示例文件
│ └── .htaccess # 禁止直接访问
└── README.md # 项目说明
- HTML5 - Canvas 绘制转盘
- CSS3 - 动画和响应式布局
- JavaScript - 原生 ES6+（异步支持）
- localStorage - 本地存储
- PHP - 多设备同步后端（可选）
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
- 移动端浏览器（已优化手机端渲染）
{
"mode": "default",
"title": "幸运抽奖",
"prizes": [
{
"id": "abc123",
"text": "一等奖",
"icon": "🏆",
"color": "#e74c3c",
"weight": 10,
"maxWins": 1,
"winCount": 0
}
],
"updatedAt": "2026-04-09T00:00:00.000Z"
}一个 user 的 JSON 文件包含多个 mode 配置：
{
"user": "张三",
"modes": {
"default": {
"title": "幸运抽奖",
"prizes": [...],
"updatedAt": "..."
},
"team1": {
"title": "团队抽奖",
"prizes": [...],
"updatedAt": "..."
}
},
"updatedAt": "2026-04-09T00:00:00.000Z"
}lottery_config_{mode}- 配置数据（本地存储）lottery_history_{mode}- 抽奖历史（本地存储）user/{username}.json- 配置文件（服务端存储）
- 文字在上图标在下：文字显示区域更大，避免省略号
- 动态字体大小：根据屏幕尺寸自动调整
- 文字最大长度：小屏4字、中屏5字、大屏7-10字
- 高分辨率支持：Canvas DPI 缩放，避免模糊
- 手机端优化：特殊尺寸计算，确保正确渲染
- GB-canvas-turntable - 原始参考项目
多 mode 配置支持：
- 改进服务端存储结构，一个 user 的 JSON 文件可以包含多个 mode 配置
user参数指定 JSON 配置文件名（如user/张三.json）mode参数指定在该 JSON 中使用哪个 mode 配置- 如果指定的 mode 不存在，保存时会自动创建
- 支持同一用户创建多个独立的抽奖模式（如团队抽奖、班级抽奖、活动抽奖）
数据结构变化：
- 旧结构：每个 mode 独立存储
- 新结构：一个 user 包含多个 modes
{
"user": "张三",
"modes": {
"default": { "title": "...", "prizes": [...] },
"team1": { "title": "...", "prizes": [...] }
}
}功能完善：
- 权重系统改为百分比（0-100）
- 每个选项增加最大中奖次数字段
- 重置按钮仅重置中奖次数
- 添加清空和导入按钮
- 文字在上、图标在下的渲染方式
- 移动端渲染优化
初始版本：
- Canvas 转盘抽奖
- 本地存储配置
- 服务端多设备同步
- 响应式设计
MIT License
版本: v1.2.0
更新日期: 2026-04-09
作者: 柳飘飘