# 网页点名系统 **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**: 2025-12-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README Fork me on Gitee star # 🎆 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)