TEACHING TOOL / 通用
课堂倒计时器
专为课堂场景设计的倒计时工具——预设常用时长、颜色提醒、声音提示与系统通知,让答题和讨论节奏一目了然。
功能特性
- 快捷预设 — 一键选择
30 秒/1 分钟/3 分钟/5 分钟 - 自定义时长 — 分钟 + 秒组合输入,灵活设置任意时长
- 进度条可视化 — 顶部进度条随时间缩短,剩余时间一目了然
- 颜色提醒 —
≤ 30 秒黄色警告,≤ 10 秒红色脉动冲刺 - 结束提示音 — 三声蜂鸣提醒(可关闭)
- 系统通知 — 结束时通过浏览器
Notification弹出系统级通知 - 完成状态 — 计时结束后数字变绿,提示「时间到!」
使用步骤
- 打开页面,默认显示
01:00 - 点击预设按钮或直接在「分钟 / 秒」输入框中设置时长
- 点「开始」启动倒计时,「暂停」可中途暂停,「重置」恢复初始时长
- 剩余 30 秒开始变黄,10 秒变红并脉动
- 时间归零后播放提示音 + 弹出系统通知(需授予通知权限)
快捷键
| 键位 | 作用 |
|---|---|
Space | 开始 / 暂停切换 |
R | 重置计时器 |
技术实现
- 纯静态 — HTML + CSS + 原生 JavaScript,单文件可运行
- Web Audio API — 使用
OscillatorNode实时合成三声蜂鸣提示音 - Notification API — 调用浏览器系统通知,无需任何后端
- CSS 动画 —
@keyframes pulse实现最后 10 秒的脉动效果
适用场景
- 课堂答题限时
- 小组讨论计时
- 演讲 / 面试 / 活动环节控制