commit cd4fcfefa2a1629979e6f97740fcac2502251d4c Author: Agent Date: Sat May 23 23:39:12 2026 +0800 release: 在线点名抽奖 v1.0.0 diff --git a/README.md b/README.md new file mode 100644 index 0000000..576610d --- /dev/null +++ b/README.md @@ -0,0 +1,198 @@ +# 🎯 在线点名抽奖 + +> 纯静态 HTML，零依赖，开箱即用 + +--- + +## 项目简介 + +在线点名抽奖是一款基于浏览器的轻量级随机点名工具。整个应用仅一个 HTML 文件，无需安装任何依赖或搭建服务器，双击即可在浏览器中运行。适用于课堂点名、活动抽奖、团队游戏等场景。 + +**核心特点：** + +- **零依赖**：纯静态 HTML，无任何外部库或框架 +- **即开即用**：双击文件即可在浏览器中运行 +- **响应式设计**：适配桌面和移动端 +- **隐私安全**：所有数据保存在浏览器内存中，不上传任何信息 + +--- + +## 功能特性 + +### 📋 F021 - 名单管理 + +支持多种方式导入参与抽奖的人员名单： + +| 方式 | 说明 | +|------|------| +| **手动输入** | 在文本框中输入名字，支持逗号（,）、顿号（、）、分号（;）、换行等多种分隔符 | +| **TXT 文件导入** | 点击「导入 TXT」按钮，选择 `.txt` 文件，自动解析名字 | +| **CSV 文件导入** | 点击「导入 CSV」按钮，选择 `.csv` 或 `.tsv` 文件，支持单列或单行格式 | + +导入后，所有人员自动进入抽奖池，页面顶部实时显示当前有效名单总数。名单列表以标签形式展示在输入框下方，方便查看。 + +### 🎰 F022 - 抽奖引擎 + +从有效名单中随机选取一人，支持两种模式： + +- **单次模式（默认）**：抽中后从名单中移除，适合"每人仅中奖一次"的场景 +- **重复模式**：抽中后保留在名单中，适合"允许同一人中多次"的场景 + +> **提示**：长按「开始抽奖」按钮 3 秒可进入高级设置面板（详见下方「后门设置」）。 + +### 🎆 F023 - 动画展示 + +中奖过程配有流畅的视觉动画： + +- **名字滚动**：名字快速切换滚动，3 秒后逐渐减速停止 +- **头像展示**：自动取名字的后两个字作为头像文字，显示在圆形头像中 +- **个性配色**：每人分配不同的纯色背景（通过名字哈希算法生成） +- **烟花庆祝**：中奖后播放 Canvas 粒子烟花动画，持续约 4 秒 +- **结果公告**：动画结束后显示"🎉 本次幸运儿是：XXX" + +### 📜 F024 - 历史记录 + +每次抽奖结果自动记录： + +- **记录内容**：轮次编号、中奖人姓名、中奖时间（精确到秒） +- **展示方式**：页面底部以表格形式展示，最新记录在最上方 +- **存储方式**：保存在浏览器内存中，页面关闭后自动清空 +- **无条数限制**：只要页面不关闭，所有记录都会保留 + +--- + +## 快速开始 + +1. 找到 `index.html` 文件 +2. 双击打开（或在浏览器中拖入该文件） +3. 在左侧「名单管理」区域输入或导入人员名单 +4. 选择抽奖模式（单次 / 重复） +5. 点击「🎲 开始抽奖」按钮 +6. 等待动画结束，查看中奖结果 + +--- + +## 使用方法 + +### 1. 名单管理 + +#### 手动输入 + +在文本框中输入名字，使用以下任意分隔符： + +``` +张三, 李四, 王五 +``` + +或 + +``` +张三、李四、王五 +``` + +或 + +``` +张三; 李四; 王五 +``` + +或 + +``` +张三 +李四 +王五 +``` + +输入完成后点击「添加名单」按钮，名字即加入抽奖池。 + +#### 文件导入 + +- **TXT 文件**：每行一个名字，或用逗号、分号分隔均可 +- **CSV 文件**：支持单列（每行一个名字）或单行（逗号分隔）格式 + +> **注意**：文件编码需为 UTF-8，否则可能出现中文乱码。 + +#### 去重机制 + +系统会自动去除重复名字，多次导入同一人不会重复计入。 + +### 2. 抽奖操作 + +#### 选择模式 + +- **单次模式**：推荐用于正式抽奖，每人只有一次中奖机会 +- **重复模式**：适合游戏环节，允许同一人多次中奖 + +#### 开始抽奖 + +点击「🎲 开始抽奖」按钮，系统将： + +1. 名字开始快速滚动 +2. 3 秒后逐渐减速 +3. 最终停在中奖人名字上 +4. 播放烟花庆祝动画 +5. 在底部记录中奖信息 + +#### 连续抽奖 + +单次抽奖结束后，直接再次点击「开始抽奖」即可进行下一轮。 + +### 3. 后门设置（高级功能） + +长按「🎲 开始抽奖」按钮 **3 秒**，即可打开高级设置面板。 + +#### 必中名单 + +在「必中名单」区域，可以指定某些人必须中奖： + +- **文本输入**：输入名字（逗号分隔），点击「确认」 +- **复选框选择**：从当前抽奖池中勾选人员，点击「确认」 + +设置后，抽奖将仅在必中名单范围内随机选择。 + +#### 排除名单 + +在「排除名单」区域，可以指定某些人不参与抽奖： + +- **文本输入**：输入名字（逗号分隔），点击「确认」 +- **复选框选择**：从当前抽奖池中勾选人员，点击「确认」 + +设置后，被排除的人将不会出现在抽奖候选中。 + +#### 关闭面板 + +点击面板底部「关闭」按钮，或点击面板外部区域即可关闭。 + +> **提示**：后门设置仅在当前页面有效，刷新页面后重置。 + +--- + +## 注意事项 + +1. **数据不持久**：所有名单和历史记录保存在浏览器内存中，**刷新或关闭页面后数据将全部丢失**。如需保留，请提前记录中奖结果。 +2. **文件编码**：导入 TXT/CSV 文件时，请确保文件为 **UTF-8 编码**，否则中文名字可能出现乱码。 +3. **名字去重**：系统自动去除重复名字，同一人多次导入只计一次。 +4. **抽奖池为空**：如果抽奖池中没有人员，点击「开始抽奖」会弹出提示。 +5. **后门设置**：长按按钮进入后门面板，普通用户不会误触。后门设置同样在页面关闭后失效。 +6. **单次模式**：抽中的人会从名单中移除，抽奖池人数会相应减少。 +7. **动画期间**：抽奖动画进行中（约 3.5 秒），按钮处于禁用状态，无法重复点击。 + +--- + +## 兼容性说明 + +| 浏览器 | 支持情况 | +|--------|----------| +| Chrome 60+ | ✅ 完全支持 | +| Edge 79+ | ✅ 完全支持 | +| Firefox 60+ | ✅ 完全支持 | +| Safari 12+ | ✅ 完全支持 | +| 移动端浏览器 | ✅ 支持（iOS Safari / Chrome for Android） | +| IE 11 | ⚠️ 可能不兼容（未测试） | + +**最低要求**：支持 ES5 JavaScript 和 Canvas API 的现代浏览器。 + +--- + +*文档版本：v1.0 | 项目 ID：PROJ-20260523012* diff --git a/index.html b/index.html new file mode 100644 index 0000000..ad9fb53 --- /dev/null +++ b/index.html @@ -0,0 +1,1447 @@ + + + + + + 在线点名抽奖 + + + +
+ + +
+

🎯 在线点名抽奖

+ 当前名单: 0 人 +
+ + +
+ + +
+

📋 名单管理

+ +
+ + + +
+
+
+ + +
+

🎰 抽奖

+ + +
+ + +
+ + +
+
+
?
+
+
等待开始
+
+ + + + + + + + + +
+
+ + +
+

📜 历史记录

+ + + +
轮次中奖人时间
+
+ + + + +
+ + + + \ No newline at end of file