HTML 页面实时显示时间需用 JavaScript 定时器，包括 setInterval 倒计时、setTimeout 递归正计时、requestAnimationFrame 平滑计时、Date 同步计时及封装可复用 Timer 类五种方法。
如果您希望在 HTML 页面中实时显示经过的时间，则需要借助 JavaScript 的定时器机制来动态更新页面内容。以下是实现计时器功能的多种方法：
一、使用 setInterval 实现基础倒计时
该方法通过 setInterval 周期性调用函数，每次递减剩余时间并更新页面显示，适用于设定固定时长后的倒计时场景。
1、在 HTML 中添加一个用于显示时间的元素，例如：
。
2、在 script 标签内定义总秒数变量，如let totalSeconds = 180（表示 3 分钟）。
立即学习 “ 前端免费学习笔记（深入）”；
3、使用 setInterval 每 1000 毫秒执行一次时间更新逻辑，将剩余秒数转换为时分秒格式。
4、当剩余秒数为 0 时，调用 clearInterval 停止定时器，并可触发完成提示。
二、使用 setTimeout 实现递归正计时
该方法利用 setTimeout 的单次执行特性，通过函数自调用形成循环，避免 setInterval 可能因执行延迟导致的时间漂移问题。
1、声明起始时间戳变量，例如let startTime = Date.now()。
2、定义一个名为 updateTimer 的函数，在其中计算当前已过去毫秒数并格式化为时分秒。
3、使用 document.getElementById("timer").textContent = formattedTime 更新显示区域。
4、在函数末尾调用setTimeout(updateTimer, 10)，实现约 10 毫秒间隔的高精度计时更新。
三、基于 requestAnimationFrame 实现平滑计时显示
该方法利用 浏览器 重绘 机制，在每次屏幕刷新时更新时间值，确保计时显示与视觉刷新同步，适合对流畅度要求较高的场景。
1、获取初始时间戳，使用 performance.now() 以获得更高精度。
2、定义计时主函数，在其中计算自开始以来的毫秒差，并转换为时分秒字符串。
3、将结果写入目标 DOM 元素，例如document.querySelector("#timer").innerText = timeString。
4、在函数结尾调用 requestAnimationFrame(mainLoop) 启动下一次更新。
四、使用 Date 对象结合定时器实现系统时间同步计时
该方法将计时器与本地系统时间绑定，即使页面长时间运行或存在轻微延迟，也能保持与真实时间的一致性。
1、记录计时开始时刻的 new Date() 实例，保存为startTime。
2、在定时器回调中再次创建new Date()，用当前时间减去开始时间得到毫秒差。
3、将毫秒差转换为小时、分钟、秒、毫秒四部分，并补零 格式化输出。
4、直接赋值给页面中具有 id="timer" 的元素的 textContent 属性。
五、封装为可复用的计时器类并支持暂停 / 继续
该方法将计时逻辑封装为 ES6 类，提供 start、pause、resume、reset 等控制接口，便于在多个位置复用和管理状态。
1、定义 class Timer，内部维护startTime、elapsedTime、isRunning 等状态属性。
2、在 start() 方法中记录当前时间并设置 isRunning = true，然后调用tick() 启动循环。
3、pause()方法中保存已流逝时间并清除定时器引用，resume()则恢复运行并修正起始时间。
4、通过 timer.displayElement = document.getElementById("timer") 绑定显示容器，自动更新内容。
