8.7 KiB
🎯 在线点名抽奖
纯静态 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 - 历史记录
每次抽奖结果自动记录:
- 记录内容:轮次编号、中奖人姓名、中奖时间(精确到秒)
- 展示方式:页面底部以表格形式展示,最新记录在最上方
- 存储方式:保存在浏览器内存中,页面关闭后自动清空
- 无条数限制:只要页面不关闭,所有记录都会保留
快速开始
- 找到
index.html文件 - 双击打开(或在浏览器中拖入该文件)
- 在左侧「名单管理」区域输入或导入人员名单
- 选择抽奖模式(单次 / 重复)
- 点击「🎲 开始抽奖」按钮
- 等待动画结束,查看中奖结果
使用方法
1. 名单管理
手动输入
在文本框中输入名字,使用以下任意分隔符:
张三, 李四, 王五
或
张三、李四、王五
或
张三; 李四; 王五
或
张三
李四
王五
输入完成后点击「添加名单」按钮,名字即加入抽奖池。
文件导入
- TXT 文件:每行一个名字,或用逗号、分号分隔均可
- CSV 文件:支持单列(每行一个名字)或单行(逗号分隔)格式
注意:文件编码需为 UTF-8,否则可能出现中文乱码。
去重机制
系统会自动去除重复名字,多次导入同一人不会重复计入。
2. 抽奖操作
选择模式
- 单次模式:推荐用于正式抽奖,每人只有一次中奖机会
- 重复模式:适合游戏环节,允许同一人多次中奖
开始抽奖
点击「🎲 开始抽奖」按钮,系统将:
- 名字开始快速滚动
- 3 秒后逐渐减速
- 最终停在中奖人名字上
- 播放烟花庆祝动画
- 在底部记录中奖信息
连续抽奖
单次抽奖结束后,直接再次点击「开始抽奖」即可进行下一轮。
3. 后门设置(高级功能)
长按「🎲 开始抽奖」按钮 3 秒,即可打开高级设置面板。
必中名单
在「必中名单」区域,可以指定某些人必须中奖:
- 文本输入:输入名字(逗号分隔),点击「确认」
- 复选框选择:从当前抽奖池中勾选人员,点击「确认」
设置后,抽奖将仅在必中名单范围内随机选择。
概率权重(v1.1.0 新增)
在「概率设置」区域,可以为每个人分配概率权重:
- 设置方式:在每个人名旁的输入框中填写 0-100 的数值
- 权重含义:数值越大,中奖概率越高(按权重比例分配)
- 权重为 0:该人完全不参与抽奖(等同于排除)
- 默认值:未设置时所有人权重为 1(等概率)
优先级:必中名单 > 概率权重 > 排除名单
- 若设置了必中名单,则仅在必中名单内按权重分配
- 排除名单中的人不参与抽奖
- 概率为 0 的人等同于排除
排除名单
在「排除名单」区域,可以指定某些人不参与抽奖:
- 文本输入:输入名字(逗号分隔),点击「确认」
- 复选框选择:从当前抽奖池中勾选人员,点击「确认」
设置后,被排除的人将不会出现在抽奖候选中。
关闭面板
点击面板底部「关闭」按钮,或点击面板外部区域即可关闭。
提示:后门设置仅在当前页面有效,刷新页面后重置。
注意事项
- 数据不持久:所有名单和历史记录保存在浏览器内存中,刷新或关闭页面后数据将全部丢失。如需保留,请提前记录中奖结果。
- 文件编码:导入 TXT/CSV 文件时,请确保文件为 UTF-8 编码,否则中文名字可能出现乱码。
- 名字去重:系统自动去除重复名字,同一人多次导入只计一次。
- 抽奖池为空:如果抽奖池中没有人员,点击「开始抽奖」会弹出提示。
- 后门设置:长按按钮进入后门面板,普通用户不会误触。后门设置同样在页面关闭后失效。
- 单次模式:抽中的人会从名单中移除,抽奖池人数会相应减少。
- 动画期间:抽奖动画进行中(约 3.5 秒),按钮处于禁用状态,无法重复点击。
- 名单编辑(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