# 网页点名系统 **Repository Path**: pixelcrafters/web-roll-call ## Basic Information - **Project Name**: 网页点名系统 - **Description**: 有两个基于HTML、CSS、Javascirpt的网页点名系统，平常老师上课可以用，也可以用来作为抽奖系统之类的 - **Primary Language**: HTML - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: https://ld.pixelcrafters.com.cn - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2024-09-15 - **Last Updated**: 2026-07-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README Fork me on Gitee star # Lucky Dog 更新日志 ## v2.0.0 — 2026-07-30 v2.0.0 是继 v1.2.0 之后的一次大版本更新。本次更新重新设计了设置与操作确认体验，加入双主题系统和旧版数据迁移，并集中修复了名单安全、存储容错与随机点名稳定性问题。 ### 更新亮点 - 全新设置中心，使用紧凑的左侧一级菜单布局。 - 新增“经典粉金”和“高级灰黑”双主题。 - 使用网页内确认弹层替代浏览器原生弹窗。 - 自动兼容并迁移旧版本地名单。 - 修复重复姓名、自动暂停计时器等关键逻辑问题。 ### 全新设置中心 - 设置中心重构为“管理名单 / 常规 / 关于”三个一级菜单。 - “管理名单”位于第一项，每次打开设置时默认显示。 - 设置中心采用固定的灰黑配色和白色文字，不受主页面主题影响。 - 调整整体尺寸、排版和间距，常见屏幕高度下可尽量完整显示。 - 将明显的系统滚动条替换为细窄、低对比度滚动条。 - 设置中心增加打开和关闭动画。 - 支持点击遮罩、关闭按钮和 `Esc` 键关闭。 - 菜单支持方向键、Home 和 End 键切换。 ### 双主题系统 - 保留原有的“经典粉金”主题。 - 新增参考 Codex 界面配色的“高级灰黑”主题。 - 主页面、按钮、卡片、页脚、背景粒子和网页确认弹层会跟随主题变化。 - 设置菜单始终保持独立的灰黑配色。 - 主题选择自动保存到浏览器本地，下次打开时自动恢复。 - 在“常规”菜单中提供可视化主题预览与选择状态。 ### 网页内操作确认 - 新增统一的网页确认弹层，替代 `alert()`、`prompt()` 和 `confirm()`。 - 新增名单时可直接在网页弹层中输入并校验名单名称。 - 保存名单前显示确认信息，完成后显示保存结果。 - 删除名单时显示危险操作确认及自动切换目标名单。 - 名单为空、无法删除最后一个名单等提示均改为网页内显示。 - 确认弹层支持确认、取消、关闭按钮、`Esc` 键及点击遮罩关闭。 - 确认弹层增加打开和关闭动画，并跟随主页面主题。 ### 名单管理与数据兼容 - 继续使用 `lists` 和 `currentList` 存储格式，v1.2.0 名单可直接使用。 - 增加对更早版本 `namesList` 格式的一次性自动迁移： - 没有新版名单时，旧名单自动成为默认名单。 - 已有新版名单时，旧数据作为“旧版名单”合并，不覆盖现有内容。 - 已存在相同名单时不会重复导入。 - 迁移后保留旧版原始数据，便于需要时降级使用。 - 本地名单数据损坏、格式错误或无法访问时自动回退到安全默认值。 - 当前名单不存在时自动选择一个有效名单。 ### 安全性改进 - 名单名称不再通过 `innerHTML` 拼接。 - 使用 DOM API 和 `textContent` 安全创建名单选项，修复持久化 HTML 注入风险。 - 对本地存储中的名单对象、名单数组及姓名类型进行验证和过滤。 - 新增名单名称重复与空值校验。 ### 随机点名与稳定性修复 - 修复名单包含重复姓名时可能显示 `undefined` 的问题。 - 抽取记录改为按名单位置追踪，重复姓名可以正常参与随机点名。 - 修复手动暂停后立即重新开始时，上一轮自动暂停计时器可能打断新一轮的问题。 - 暂停时会同时清理滚动计时器和自动暂停计时器。 - 切换、保存或删除名单后会正确重置当前抽取记录。 ### 关于页面 - 新增项目简介、当前版本、开源许可、数据存储方式和版权信息。 - 增加开源项目页、木兰宽松许可证第 2 版、官方博客及个人主页入口。 - 新增本更新说明入口。 ### 无障碍与体验 - 为设置中心、一级菜单、确认弹层和主题选项补充 ARIA 语义。 - 增加键盘焦点管理和键盘操作支持。 - 支持 `prefers-reduced-motion`，在系统要求减少动画时缩短动画时间。 - 优化移动端设置布局和操作按钮排列。 ### 升级说明 - 从 v1.2.0 在同一网址或同一文件路径直接升级，不需要手动转换名单。 - 更早版本的 `namesList` 会在首次加载 v2.0.0 时自动迁移。 - 浏览器会按网址或本地文件路径隔离存储；若新旧版本从不同地址打开，数据无法跨存储区域自动读取。 - 本次升级没有主动删除名单或旧版存储数据。 ## v1.2.0 - v2.0.0 之前的稳定版本。 - 提供基础随机点名、多名单管理、本地保存及自动暂停功能。 # 🎆 LuckyDog - New Year Special Version 一个为 **班级活动 / 元旦晚会 / 课堂互动** 设计的 🎉 **新年主题随机点名与互动展示网页** --- ## ✨ 项目简介 LuckyDog 是一个集 **随机点名、炫酷新年动效、名单管理** 于一体的网页项目。 本版本为 **New Year Special Version（元旦特别版）**，整体以新年红色主题为核心，融合烟花、灯笼、彩带等节日元素，适合在班级元旦晚会或课堂大屏展示中使用。 --- ## 🎯 核心功能 ### 🎲 随机点名 - 支持自动随机停止，无需手动控制 - 已抽取姓名自动记录，避免短时间内重复 - 点击开始时伴随彩带特效，增强互动感 ### 📋 名单管理 - 支持 **多名单配置** - 可新增 / 切换 / 删除名单 - 名单数据使用 `localStorage` 本地保存，刷新不丢失 ### ⚙️ 设置弹窗 - 弹窗式管理界面，操作直观 - 半透明毛玻璃风格，整体风格统一 --- ## 🎆 新年主题动效 - 🎇 Canvas 烟花爆炸动画（多粒子、随机颜色） - 🏮 新年灯笼缓慢上升动画 - 🎊 彩纸 / 彩带飘落效果 - ✨ 背景光点闪烁 + 动态粒子背景 - 🚀 页面开场品牌动画（居中 → 左上角） --- ## 🎨 视觉风格 - 主色调：**新年红 + 金色高亮** - 半透明卡片 + 模糊背景（Glassmorphism） - 平滑过渡动画，加载过程自然不突兀 - 适配不同分辨率与窗口尺寸 --- ## 📁 项目结构说明 ``` ├─ index.html # 页面主体 ├─ base.css # 基础样式与整体布局 ├─ modal.css # 设置弹窗样式 ├─ newyear.css # 新年主题特效样式 ├─ nameread.js # 随机点名与名单管理逻辑 ├─ effects.js # 页面通用动效 ├─ firework2026.js # 新年烟花 Canvas 动画 ├─ newyear.js # 灯笼 / 彩带 / 开场动画 ``` --- ## 📒 更新日志 ### v2026.01.01｜New Year Special Version - 新增新年主题开场动画 - 新增烟花、灯笼、彩带等节日动效 - 新增多名单管理与本地存储 - 优化整体视觉风格与交互体验 - 优化动画性能与结构组织 --- ## 📌 使用场景 - 🎤 班级元旦晚会互动 - 🏫 课堂随机点名 - 🎉 节日气氛展示页面 - 💻 教室大屏 / 投影展示 --- ## 📜 版权说明 Copyright © 2025 LuckyDog New Year Special Version 仅供 **学习与非商业用途** 使用。 # 网页点名系统 # LuckyDog-抽奖系统 v1.0.0 发布公告 亲爱的用户们， 我们非常高兴地宣布，**LuckyDog-抽奖系统** 已成功升级至 **v1.0.0** 版本！此次更新带来了多项功能优化和用户体验提升，旨在为您提供更加公平、高效且易用的随机点名工具。以下是本次版本更新的详细内容： ## 📌 版本概述 **LuckyDog-抽奖系统 v1.0.0** 旨在帮助教师、活动组织者及各类需要随机选取人员的场景，提供一个简便、可靠的解决方案。本次更新重点优化了抽奖算法，确保每位参与者在所有人被抽取前不会重复被选中，极大提升了抽奖的公平性和透明度。 ## ✨ 新功能与改进 ### 1. **公平随机抽取机制** - **防止重复抽取**：引入 `usedNames` 数组记录已被抽取的名字，确保每次抽取的名字不会重复，直到所有名字都被抽完后，系统会自动重置抽奖池。 - **自动重置**：当所有名字都被抽取完毕后，系统会自动重置 `usedNames`，为下一轮抽奖做好准备。 ### 2. **优化倒计时显示** - **简化显示方式**：取消了复杂的数字翻转动画，采用直观的文本形式显示倒计时（例如“抽奖将在 5 秒后结束”），提升了用户的阅读体验。 - **实时更新**：倒计时每秒更新一次，确保用户清晰了解抽奖剩余时间。 ### 3. **增强动画效果** - **旋转动画**：在抽奖结束或暂停时，名字显示区域会执行旋转动画，增加视觉冲击力。 - **彩带效果**：抽奖成功后，系统会触发多次彩带动画，庆祝幸运儿的诞生。 ### 4. **用户界面优化** - **统一样式**：整合和优化了CSS样式，移除了重复和冲突的样式定义，确保页面布局更加整洁美观。 - **响应式设计**：优化了页面在不同设备上的显示效果，确保在移动端和桌面端均有良好的用户体验。 ### 5. **名单管理功能增强** - **添加新名单**：用户可以通过“添加新名单”按钮创建多个名单配置，方便在不同场景下使用不同的名字列表。 - **删除名单**：新增“删除名单”功能，用户可以轻松删除不再需要的名单配置，系统将自动切换到剩余的名单。 - **保存名单**：在“设置”中编辑名单后，点击“保存(Save)”按钮即可将更改持久化，确保数据不会丢失。 ## 🛠️ Bug 修复与性能提升 - **资源加载优化**：移除了重复引入的 Font Awesome 和 Canvas Confetti 库，提升了页面加载速度和性能。 - **稳定性提升**：优化了抽奖和倒计时的逻辑，避免在某些情况下出现倒计时显示重复或抽奖逻辑错误的问题。 - **界面响应优化**：修复了部分样式冲突，确保各元素在不同浏览器和设备上的一致性显示。 ## 📝 使用说明 1. **启动抽奖**： - 点击“Start Random(It can stop randomly)”按钮，系统将开始快速切换名字并启动倒计时。 - 倒计时结束后，系统会停止名字切换，展示最终抽中的名字，并触发旋转及彩带动画。 2. **暂停抽奖**： - 在抽奖过程中，点击“Pause(You Don't Need To Stop)”按钮，系统将立即停止抽奖并触发旋转及彩带动画。 3. **管理名单**： - 点击页面右上角的“设置(Setting)”按钮，打开模态窗口。 - 在“选择名单”下拉菜单中选择或创建新的名单配置。 - 编辑名单后，点击“保存(Save)”按钮保存更改。 - 可通过“添加新名单”按钮创建多个名单，或通过“删除名单”按钮删除不需要的名单。 ## 🎉 感谢与支持 感谢所有用户对 **LuckyDog-抽奖系统 v1.0.0** 的支持与信任！我们致力于不断优化和改进产品，以满足您的需求。如果您在使用过程中有任何建议或遇到问题，欢迎随时联系我们。 **联系方式**： - 官方网站：[PixelCrafters](https://blog.pixelcrafters.com.cn/) - 个人博客：[Onism](https://pixelcrafters.cn/) - 抽奖网站：[LuckyDog Raffle](https://ld.pixelcrafters.com.cn/raffle) 期待您的反馈，让我们一起打造更好的随机点名工具！ 祝您使用愉快！ **PixelCrafters 团队** #### 旧版LuckyDog介绍（可直接忽略） 有两个基于HTML、CSS的网页点名系统，平常老师上课可以用，也可以用来作为抽奖系统之类的 #### 软件架构 基于HTML、CSS #### 样式演示 ![输入图片说明](screenshot-1726409884015.png) ![输入图片说明](screenshot-1726409890877.png) ![输入图片说明](screenshot-1726409901544.png) #### 安装教程 1. 选择自己想要的下载 2. 直接打开就可以了 #### 使用说明 _我该如何修改随机时间？_ 一、文字列表版 1. 用编辑器打开.html文件，找到以下代码 ![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-15%20222109.png) 1000代表1s，根据自己需求修改 二、转盘版 1. 用编辑器打开.html文件，找到以下代码 ![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-15%20222050.png) “720” “360” 代表的是旋转圈数，random是随机，表示0到720随机，再加上另外圈数 _我该如何修改名字列表？_ 一、文字列表版 1. 用编辑器打开.html文件，找到以下代码 ![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-15%20222033.png) 直接修改列表里的就行了 > 注：经过新一版本的更新，修改名字列表可以直接从前端修改 二、转盘版 1. 用编辑器打开.html文件，找到以下代码 ![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-15%20222012.png) 2. 首先修改列表里的名字，换成自己想要的 3. 在列表下一行代码，也就是第141行，将`var list = new Array(11).fill(0).map(function(o, i) `中的`Array(11)`里的数字改成你所输入的名字的个数，保存即可 #### 参与贡献 1. Onism #### 网站： [LuckyDog-随机抽名网站](http://ld.pixelcrafters.com.cn)