企业官网建设流程全解析

培训机构的课堂要控制节奏：25分钟教学、10分钟练习、5分钟互动——老师拿手机看时间既不专业也容易忘。用开源工具拼了一套课堂计时系统，成本为零。

一、需求清单

📌 教室前屏显示当前环节与剩余时间
📌 老师手里的「遥控器」切换环节
📌 环节结束自动提示音
📌 学生也能一眼看懂「现在是什么环节」

二、拼装方案

📌 显示端：浏览器全屏展示
一个单页Web应用：大号倒计时数字+当前环节名称+下一环节预告——教室的电视或投影开个浏览器全屏即可。前端用了Vue3加一个环形进度条组件，代码不到300行。
📌 遥控端：翻页笔的妙用
老师手里的无线翻页笔（机构本来就有）——上翻页键切换到上一环节、下翻页键进入下一环节。翻页笔本质是USB键盘设备，监听键盘事件就行——零成本遥控器。
📌 计时引擎：配置驱动
环节定义写在JSON里：名称、时长、提示音——不同课程（45分钟版/90分钟版）加载不同配置。老师开课前选一下课程类型，全程不用碰电脑。

三、两个加分细节

📌 提示音的「渐强」设计
环节结束前30秒提示音渐强——比突然的铃声优雅，老师的收尾话语不会被粗暴打断。
📌 环节历史的本地记录
每个环节的实际用时记录在本地——课后教研复盘「练习环节超时了8分钟」有数据可查，课堂节奏的改进有了依据。
💡 这套东西第二周就被隔壁机构抄走了——开源的意义就在这：好用的方案，值得被复制。
💬 你们课堂计时是怎么解决的？评论区聊聊