🎯 在线点名抽奖

纯静态 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 | 项目 IDPROJ-20260523012

Description
在线点名抽奖 v1.0.0
Readme 107 KiB
2026-05-24 18:40:43 +08:00
Languages
HTML 72.5%
JavaScript 27.5%