TEACHING TOOL / 通用

课堂倒计时器

专为课堂场景设计的倒计时工具——预设常用时长、颜色提醒、声音提示与系统通知，让答题和讨论节奏一目了然。

Try it →View source

功能特性

• 快捷预设 — 一键选择 30 秒 / 1 分钟 / 3 分钟 / 5 分钟
• 自定义时长 — 分钟 + 秒组合输入，灵活设置任意时长
• 进度条可视化 — 顶部进度条随时间缩短，剩余时间一目了然
• 颜色提醒 — ≤ 30 秒 黄色警告，≤ 10 秒 红色脉动冲刺
• 结束提示音 — 三声蜂鸣提醒（可关闭）
• 系统通知 — 结束时通过浏览器 Notification 弹出系统级通知
• 完成状态 — 计时结束后数字变绿，提示「时间到！」

使用步骤

1. 打开页面，默认显示 01:00
2. 点击预设按钮或直接在「分钟 / 秒」输入框中设置时长
3. 点「开始」启动倒计时，「暂停」可中途暂停，「重置」恢复初始时长
4. 剩余 30 秒开始变黄，10 秒变红并脉动
5. 时间归零后播放提示音 + 弹出系统通知（需授予通知权限）

快捷键

键位	作用
Space	开始 / 暂停切换
R	重置计时器

技术实现

• 纯静态 — HTML + CSS + 原生 JavaScript，单文件可运行
• Web Audio API — 使用 OscillatorNode 实时合成三声蜂鸣提示音
• Notification API — 调用浏览器系统通知，无需任何后端
• CSS 动画 — @keyframes pulse 实现最后 10 秒的脉动效果

适用场景

• 课堂答题限时
• 小组讨论计时
• 演讲 / 面试 / 活动环节控制