HTML如何动态显示时间到毫秒？高精度网页时钟-html教程-PHP中文网

setinterval无法稳定显示毫秒，因浏览器最小调度间隔为4–16ms且受主线程阻塞影响；应使用performance.now()对齐初始date，并通过requestanimationframe按帧更新时间，避免节流与丢帧。

html如何动态显示时间到毫秒？高精度网页时钟

为什么 `setInterval` 无法稳定显示毫秒

直接把 setInterval 的间隔设成 1 毫秒，页面不会每毫秒刷新一次——浏览器实际最小调度间隔通常在 4–16ms，且 JS 主线程繁忙时会严重丢帧。更关键的是，new Date().getMilliseconds() 返回的是“当前秒内的毫秒数”，但你无法靠它推算出“精确到毫秒的完整时间戳”，因为 Date 对象本身构造就有微小延迟（通常 0.1–2ms），连续调用两次取差值也不可靠。

`performance.now()` 是唯一靠谱的毫秒源

它返回的是相对于页面加载时刻的高精度时间（单位：毫秒，精度可达微秒级），不受系统时钟跳变影响，且不被浏览器节流。要显示“当前时间 + 毫秒”，必须把它和初始 Date 对齐：

页面加载时立刻记录 performance.now() 和对应的 new Date()
后续每次更新，用初始 Date 加上当前 performance.now() - initTime 得到高精度时间对象
再用 .getHours()、.getMilliseconds() 等提取并格式化

示例代码片段：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const initTime = performance.now();
const initDate = new Date();
function updateClock() {
  const now = new Date(initDate.getTime() + (performance.now() - initTime));
  const h = String(now.getHours()).padStart(2, '0');
  const m = String(now.getMinutes()).padStart(2, '0');
  const s = String(now.getSeconds()).padStart(2, '0');
  const ms = String(now.getMilliseconds()).padStart(3, '0');
  document.getElementById('clock').textContent = `${h}:${m}:${s}.${ms}`;
}
requestAnimationFrame(updateClock); // 用 RAF 避免 setInterval 节流