# 随机点名

**Repository Path**: ZackLi09/random

## Basic Information

- **Project Name**: 随机点名
- **Description**: 解决老师课堂随记点名的问题，比市面上的现成工具有如下优点：
1.名单自定义，代码量小，便于开发
2.底层是html+css+js，方便增加新功能
3.程序便于运行，运行压力小
4.提供python版
特别注意：本程序使用HTML2EXE编译

- **Primary Language**: HTML
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-05
- **Last Updated**: 2025-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 实用工具, 随机点名, 课堂工具

## README

# 随机点名

#### 介绍
解决老师课堂随记点名的问题，比市面上的现成工具有如下优点：
1.名单自定义，代码量小，便于开发
2.底层是html+css+js，方便增加新功能
3.程序便于运行，运行压力小
4.提供python版
特别注意：本程序使用HTML2EXE编译


#### 软件架构
MVVM（Model - View - ViewModel）架构的简单应用


#### 安装教程

1.Windows版本：直接运行，无需安装部署，如果有需要可以将软件拖动到C盘下，然后在桌面创建快捷方式
2.Mac版本：直接运行，无需安装部署，直接点击即可
3.html版本：1，遵循目录结构将所有文件放在同一文件夹下 2，在本机上面准备好浏览器等，能正常运行html文件的工具。3，运行即可
4.python版本：编辑器运行

#### 使用说明

1.非本人允许禁止销售修改和分发，
2.可以适当修改，要求对修改的文件进行明确标识，并保留原始版权声明，
3.禁止将软件用于商业销售目的的分发



#### 特点

1.名单自定义，代码量小，便于开发
2.底层是html+css+js，方便增加新功能
3.程序便于运行，运行压力小
4.提供python版

#### 特别说明

1. 由于gitee的限制，Mac版的软件需要特殊操作：把buil内的文件拖入，build当中，并在同一系统目录下运行
2. Mac版开发进度相对来说更加先进，但是bug比较多
这是一个基于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. 点击“重置”按钮，输入当前时间格式的密码，可清空已点过的学生记录，重新开始点名。

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