下载地址:lzy3090Ti/randomreleases/download/实用工具/-.64.EXE.EXE
介绍
解决老师课堂随记点名的问题,比市面上的现成工具有如下优点: 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版
特别说明
由于gitee的限制,Mac版的软件需要特殊操作:把buil内的文件拖入,build当中,并在同一系统目录下运行
Mac版开发进度相对来说更加先进,但是bug比较多 这是一个基于HTML、CSS和JavaScript实现的随机点名网页应用,以下是对该项目的详细介绍:
功能概述
该网页应用主要用于在学生群体中进行随机点名操作,具备以下功能:
随机点名:点击“点名”按钮,程序会从预设的学生名单中随机滚动显示学生名字,最终确定一名未被点过的学生。
颜色选择:提供多种颜色选择器,用户可以为被点名学生的名字设置颜色,设置后颜色会自动保存。
名单上传:支持通过上传文件的方式导入学生名单,上传时需要输入正确的密码(当前时间格式化为HHmm)。
重置功能:点击“重置”按钮可以清空已点过的学生记录,准备下一轮点名,同样需要输入正确密码。
技术实现
HTML部分
- 页面结构简洁明了,包含显示被点名学生的区域、“点名”按钮、颜色选择器、“重置”按钮以及用于上传名单的按钮和隐藏的文件输入框。
- 通过
id
和class
属性为各个元素进行标识,方便在CSS和JavaScript中进行操作。
CSS部分
使用了现代的Flexbox布局来实现页面元素的居中对齐,使页面在不同设备上具有良好的响应性。
为按钮添加了渐变背景和圆角样式,增强了页面的视觉效果。
定义了颜色选择器的样式,使其呈现为圆形,方便用户识别和操作。
JavaScript部分
全局变量:定义了多个全局变量,用于存储和管理点名状态、学生名单、已点过的学生列表、当前索引、选中颜色等信息。
时间密码函数:getCurrentTimeAsPassword
函数用于获取当前时间并格式化为HHmm的密码格式,用于上传名单和重置操作的密码验证。
点名功能:startRolling
函数启动点名滚动,stopRolling
函数停止滚动并确定最终被点名学生,rollNames
函数实现滚动显示随机学生名字,callStudent
函数确定最终被点名学生并更新相关状态。
事件处理:
为“点名”按钮添加点击事件,检查名单是否存在并启动点名流程。
为颜色选择器添加点击事件,实现颜色选择和保存功能。
为“上传”按钮添加点击事件,进行密码验证并触发文件选择。
为文件输入框添加change
事件,读取上传文件内容并更新学生名单。
为“重置”按钮添加点击事件,进行密码验证并重置点名状态。
本地存储:使用localStorage
来保存已点过的学生列表、当前索引、选中颜色和学生名单等信息,确保页面刷新或关闭后数据不会丢失。
使用方法
打开网页,页面会显示“点名”按钮、颜色选择器、“重置”按钮和“上传名单”按钮。
点击“上传名单”按钮,输入当前时间格式的密码(HHmm),选择包含学生名单的文本文件上传。
点击“点名”按钮,开始滚动点名,最终会显示一名未被点过的学生名字,名字颜色可通过颜色选择器进行更改。
当所有人都被点过后,会提示“所有人已抽完,开始新一轮”。
点击“重置”按钮,输入当前时间格式的密码,可清空已点过的学生记录,重新开始点名。
总结
该随机点名网页应用通过简洁的界面设计和丰富的功能实现,为教师或其他需要进行随机选择的场景提供了一个便捷的工具。同时,代码结构清晰,易于理解和扩展,可以根据实际需求进行进一步的功能优化和定制。