246 lines
8.7 KiB
Markdown
246 lines
8.7 KiB
Markdown
# 🎯 在线点名抽奖
|
||
|
||
> 纯静态 HTML，零依赖，开箱即用
|
||
|
||
**当前版本：v1.1.0**
|
||
|
||
---
|
||
|
||
## 项目简介
|
||
|
||
在线点名抽奖是一款基于浏览器的轻量级随机点名工具。整个应用仅一个 HTML 文件，无需安装任何依赖或搭建服务器，双击即可在浏览器中运行。适用于课堂点名、活动抽奖、团队游戏等场景。
|
||
|
||
**核心特点：**
|
||
|
||
- **零依赖**：纯静态 HTML，无任何外部库或框架
|
||
- **即开即用**：双击文件即可在浏览器中运行
|
||
- **响应式设计**：适配桌面和移动端
|
||
- **隐私安全**：所有数据保存在浏览器内存中，不上传任何信息
|
||
|
||
---
|
||
|
||
## 功能特性
|
||
|
||
### 📋 F021 - 名单管理
|
||
|
||
支持多种方式导入参与抽奖的人员名单：
|
||
|
||
| 方式 | 说明 |
|
||
|------|------|
|
||
| **手动输入** | 在文本框中输入名字，支持逗号（,）、顿号（、）、分号（;）、换行等多种分隔符 |
|
||
| **TXT 文件导入** | 点击「导入 TXT」按钮，选择 `.txt` 文件，自动解析名字 |
|
||
| **CSV 文件导入** | 点击「导入 CSV」按钮，选择 `.csv` 或 `.tsv` 文件，支持单列或单行格式 |
|
||
|
||
导入后，所有人员自动进入抽奖池，页面顶部实时显示当前有效名单总数。名单列表以标签形式展示在输入框下方，方便查看。
|
||
|
||
> **v1.1.0 新增**：每个名字标签旁带有 **× 删除按钮**，点击即可移除对应人员，删除后自动同步后门配置（必中名单、排除名单、概率设置）。
|
||
|
||
### 🎰 F022 - 抽奖引擎
|
||
|
||
从有效名单中随机选取一人，支持两种模式：
|
||
|
||
- **单次模式（默认）**：抽中后从名单中移除，适合"每人仅中奖一次"的场景
|
||
- **重复模式**：抽中后保留在名单中，适合"允许同一人中多次"的场景
|
||
|
||
> **提示**：长按「开始抽奖」按钮 3 秒可进入高级设置面板（详见下方「后门设置」）。
|
||
|
||
> **v1.1.0 新增**：支持**概率权重**设置。可为每个人分配 0-100 的概率权重，权重越高中奖概率越大；权重为 0 的人不参与抽奖。优先级：必中名单 > 概率权重 > 排除名单。
|
||
|
||
### 🎆 F023 - 动画展示
|
||
|
||
中奖过程配有流畅的视觉动画：
|
||
|
||
- **名字滚动**（v1.1.0 改进）：从左到右水平滚动（老虎机效果），初始速度快，逐渐减速，总时长约 3.5 秒
|
||
- **头像展示**：自动取名字的后两个字作为头像文字，显示在圆形头像中
|
||
- **个性配色**：每人分配不同的纯色背景（通过名字哈希算法生成）
|
||
- **烟花庆祝**（v1.1.0 改进）：烟花直接在弹窗周围爆炸（无底部上升阶段），持续 5 秒，粒子更密集
|
||
- **结果弹窗**（v1.1.0 新增）：抽奖结束后弹出模态弹窗，展示大尺寸头像、名字和"恭喜"字样，点击 × 或遮罩层可关闭
|
||
|
||
### 📜 F024 - 历史记录
|
||
|
||
每次抽奖结果自动记录：
|
||
|
||
- **记录内容**：轮次编号、中奖人姓名、中奖时间（精确到秒）
|
||
- **展示方式**：页面底部以表格形式展示，最新记录在最上方
|
||
- **存储方式**：保存在浏览器内存中，页面关闭后自动清空
|
||
- **无条数限制**：只要页面不关闭，所有记录都会保留
|
||
|
||
---
|
||
|
||
## 快速开始
|
||
|
||
1. 找到 `index.html` 文件
|
||
2. 双击打开（或在浏览器中拖入该文件）
|
||
3. 在左侧「名单管理」区域输入或导入人员名单
|
||
4. 选择抽奖模式（单次 / 重复）
|
||
5. 点击「🎲 开始抽奖」按钮
|
||
6. 等待动画结束，查看中奖结果
|
||
|
||
---
|
||
|
||
## 使用方法
|
||
|
||
### 1. 名单管理
|
||
|
||
#### 手动输入
|
||
|
||
在文本框中输入名字，使用以下任意分隔符：
|
||
|
||
```
|
||
张三, 李四, 王五
|
||
```
|
||
|
||
或
|
||
|
||
```
|
||
张三、李四、王五
|
||
```
|
||
|
||
或
|
||
|
||
```
|
||
张三; 李四; 王五
|
||
```
|
||
|
||
或
|
||
|
||
```
|
||
张三
|
||
李四
|
||
王五
|
||
```
|
||
|
||
输入完成后点击「添加名单」按钮，名字即加入抽奖池。
|
||
|
||
#### 文件导入
|
||
|
||
- **TXT 文件**：每行一个名字，或用逗号、分号分隔均可
|
||
- **CSV 文件**：支持单列（每行一个名字）或单行（逗号分隔）格式
|
||
|
||
> **注意**：文件编码需为 UTF-8，否则可能出现中文乱码。
|
||
|
||
#### 去重机制
|
||
|
||
系统会自动去除重复名字，多次导入同一人不会重复计入。
|
||
|
||
### 2. 抽奖操作
|
||
|
||
#### 选择模式
|
||
|
||
- **单次模式**：推荐用于正式抽奖，每人只有一次中奖机会
|
||
- **重复模式**：适合游戏环节，允许同一人多次中奖
|
||
|
||
#### 开始抽奖
|
||
|
||
点击「🎲 开始抽奖」按钮，系统将：
|
||
|
||
1. 名字开始快速滚动
|
||
2. 3 秒后逐渐减速
|
||
3. 最终停在中奖人名字上
|
||
4. 播放烟花庆祝动画
|
||
5. 在底部记录中奖信息
|
||
|
||
#### 连续抽奖
|
||
|
||
单次抽奖结束后，直接再次点击「开始抽奖」即可进行下一轮。
|
||
|
||
### 3. 后门设置（高级功能）
|
||
|
||
长按「🎲 开始抽奖」按钮 **3 秒**，即可打开高级设置面板。
|
||
|
||
#### 必中名单
|
||
|
||
在「必中名单」区域，可以指定某些人必须中奖：
|
||
|
||
- **文本输入**：输入名字（逗号分隔），点击「确认」
|
||
- **复选框选择**：从当前抽奖池中勾选人员，点击「确认」
|
||
|
||
设置后，抽奖将仅在必中名单范围内随机选择。
|
||
|
||
#### 概率权重（v1.1.0 新增）
|
||
|
||
在「概率设置」区域，可以为每个人分配概率权重：
|
||
|
||
- **设置方式**：在每个人名旁的输入框中填写 0-100 的数值
|
||
- **权重含义**：数值越大，中奖概率越高（按权重比例分配）
|
||
- **权重为 0**：该人完全不参与抽奖（等同于排除）
|
||
- **默认值**：未设置时所有人权重为 1（等概率）
|
||
|
||
> **优先级**：必中名单 > 概率权重 > 排除名单
|
||
> - 若设置了必中名单，则仅在必中名单内按权重分配
|
||
> - 排除名单中的人不参与抽奖
|
||
> - 概率为 0 的人等同于排除
|
||
|
||
#### 排除名单
|
||
|
||
在「排除名单」区域，可以指定某些人不参与抽奖：
|
||
|
||
- **文本输入**：输入名字（逗号分隔），点击「确认」
|
||
- **复选框选择**：从当前抽奖池中勾选人员，点击「确认」
|
||
|
||
设置后，被排除的人将不会出现在抽奖候选中。
|
||
|
||
#### 关闭面板
|
||
|
||
点击面板底部「关闭」按钮，或点击面板外部区域即可关闭。
|
||
|
||
> **提示**：后门设置仅在当前页面有效，刷新页面后重置。
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
1. **数据不持久**：所有名单和历史记录保存在浏览器内存中，**刷新或关闭页面后数据将全部丢失**。如需保留，请提前记录中奖结果。
|
||
2. **文件编码**：导入 TXT/CSV 文件时，请确保文件为 **UTF-8 编码**，否则中文名字可能出现乱码。
|
||
3. **名字去重**：系统自动去除重复名字，同一人多次导入只计一次。
|
||
4. **抽奖池为空**：如果抽奖池中没有人员，点击「开始抽奖」会弹出提示。
|
||
5. **后门设置**：长按按钮进入后门面板，普通用户不会误触。后门设置同样在页面关闭后失效。
|
||
6. **单次模式**：抽中的人会从名单中移除，抽奖池人数会相应减少。
|
||
7. **动画期间**：抽奖动画进行中（约 3.5 秒），按钮处于禁用状态，无法重复点击。
|
||
8. **名单编辑**（v1.1.0）：导入名单后可通过 × 按钮删除人员，删除后自动同步后门配置（必中名单、排除名单、概率设置）。抽奖进行中时删除按钮禁用。
|
||
|
||
---
|
||
|
||
## 更新日志
|
||
|
||
### v1.1.0（2026-05-24）
|
||
|
||
**新增功能：**
|
||
|
||
- **名单编辑**：导入名单后，每个名字旁显示 × 删除按钮，点击即可移除，自动同步后门配置（M001）
|
||
- **概率后门**：后门面板新增概率设置区域，可为每个人设置 0-100 的概率权重，高权重者中奖概率更高，优先级：必中名单 > 概率权重 > 排除名单（M002）
|
||
|
||
**优化改进：**
|
||
|
||
- **滚动动画**：从中心切换改为从左到右水平滚动（老虎机效果），初始速度快、逐渐减速，总时长约 3.5 秒（M003）
|
||
- **结果弹窗**：抽奖结束后弹出模态弹窗，展示大尺寸头像、名字和"恭喜"字样，点击 × 或遮罩层可关闭（M004）
|
||
- **烟花效果**：烟花直接在弹窗位置周围爆炸（无底部上升阶段），持续 5 秒，粒子更密集（M005）
|
||
|
||
### v1.0.0（2026-05-23）
|
||
|
||
- 初始版本发布
|
||
- 支持手动输入、TXT/CSV 文件导入名单
|
||
- 单次/重复两种抽奖模式
|
||
- 名字滚动动画 + 烟花庆祝效果
|
||
- 中奖历史记录
|
||
- 后门设置（必中名单、排除名单）
|
||
|
||
---
|
||
|
||
## 兼容性说明
|
||
|
||
| 浏览器 | 支持情况 |
|
||
|--------|----------|
|
||
| Chrome 60+ | ✅ 完全支持 |
|
||
| Edge 79+ | ✅ 完全支持 |
|
||
| Firefox 60+ | ✅ 完全支持 |
|
||
| Safari 12+ | ✅ 完全支持 |
|
||
| 移动端浏览器 | ✅ 支持（iOS Safari / Chrome for Android） |
|
||
| IE 11 | ⚠️ 可能不兼容（未测试） |
|
||
|
||
**最低要求**：支持 ES5 JavaScript 和 Canvas API 的现代浏览器。
|
||
|
||
---
|
||
|
||
*文档版本：v1.1.0 | 项目 ID：PROJ-20260523012*
|