随机点名标签 - 木兰确实

标签名

描述

提交信息

操作

v6.0.0.0-Windows最新稳定版

这是一个基于HTML、CSS和JavaScript实现的随机点名网页应用，以下是对该项目的详细介绍：

### 功能概述
该网页应用主要用于在学生群体中进行随机点名操作，具备以下功能：
1. **随机点名**：点击“点名”按钮，程序会从预设的学生名单中随机滚动显示学生名字，最终确定一名未被点过的学生。
2. **颜色选择**：提供多种颜色选择器，用户可以为被点名学生的名字设置颜色，设置后颜色会自动保存。
3. **名单上传**：支持通过上传文件的方式导入学生名单，上传时需要输入正确的密码（当前时间格式化为HHmm）。
4. **重置功能**：点击“重置”按钮可以清空已点过的学生记录，准备下一轮点名，同样需要输入正确密码。

### 技术实现
1. **HTML部分**
    - 页面结构简洁明了，包含显示被点名学生的区域、“点名”按钮、颜色选择器、“重置”按钮以及用于上传名单的按钮和隐藏的文件输入框。
    - 通过`id`和`class`属性为各个元素进行标识，方便在CSS和JavaScript中进行操作。
2. **CSS部分**
    - 使用了现代的Flexbox布局来实现页面元素的居中对齐，使页面在不同设备上具有良好的响应性。
    - 为按钮添加了渐变背景和圆角样式，增强了页面的视觉效果。
    - 定义了颜色选择器的样式，使其呈现为圆形，方便用户识别和操作。
3. **JavaScript部分**
    - **全局变量**：定义了多个全局变量，用于存储和管理点名状态、学生名单、已点过的学生列表、当前索引、选中颜色等信息。
    - **时间密码函数**：`getCurrentTimeAsPassword`函数用于获取当前时间并格式化为HHmm的密码格式，用于上传名单和重置操作的密码验证。
    - **点名功能**：`startRolling`函数启动点名滚动，`stopRolling`函数停止滚动并确定最终被点名学生，`rollNames`函数实现滚动显示随机学生名字，`callStudent`函数确定最终被点名学生并更新相关状态。
    - **事件处理**：
        - 为“点名”按钮添加点击事件，检查名单是否存在并启动点名流程。
        - 为颜色选择器添加点击事件，实现颜色选择和保存功能。
        - 为“上传”按钮添加点击事件，进行密码验证并触发文件选择。
        - 为文件输入框添加`change`事件，读取上传文件内容并更新学生名单。
        - 为“重置”按钮添加点击事件，进行密码验证并重置点名状态。
    - **本地存储**：使用`localStorage`来保存已点过的学生列表、当前索引、选中颜色和学生名单等信息，确保页面刷新或关闭后数据不会丢失。

### 使用方法
1. 打开网页，页面会显示“点名”按钮、颜色选择器、“重置”按钮和“上传名单”按钮。
2. 点击“上传名单”按钮，输入当前时间格式的密码（HHmm），选择包含学生名单的文本文件上传。
3. 点击“点名”按钮，开始滚动点名，最终会显示一名未被点过的学生名字，名字颜色可通过颜色选择器进行更改。
4. 当所有人都被点过后，会提示“所有人已抽完，开始新一轮”。
5. 点击“重置”按钮，输入当前时间格式的密码，可清空已点过的学生记录，重新开始点名，否则继续抽取上次没有抽过的学生。

### 总结
该随机点名网页应用通过简洁的界面设计和丰富的功能实现，为教师或其他需要进行随机选择的场景提供了一个便捷的工具。同时，代码结构清晰，易于理解和扩展，可以根据实际需求进行进一步的功能优化和定制。