应将 new Date() 放入定时器回调内以获取实时时间，避免放在外层导致时间“卡住”；使用 toLocaleTimeString() 自动适配本地格式；确保 DOM 加载完成后再执行 JS，推荐脚本置于 前或用 DOMContentLoaded；setTimeout 递归对齐秒级起点比 setInterval 更精准。

直接用 JavaScript 更新 或

的 textContent，别用 document.write() 或内联 onload——它要么只执行一次，要么破坏页面结构。

为什么 new Date() 放在定时器外会“卡住”

常见错误是把 new Date() 写在 setInterval 外面，比如：

const now = new Date(); // ❌ 只执行一次，时间不会变
setInterval(() => {
  document.getElementById('time').textContent = now.toLocaleTimeString();
}, 1000);

这会导致显示的时间永远停在脚本加载那一刻。必须把 new Date() 放进定时器回调里，每次触发都重新取值。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 每次更新都要调用 new Date() 获取实时对象
• 用 toLocaleTimeString() 比手动拼接 getHours()/getMinutes() 更省心，且自动适配本地格式（含 12/24 小时制、秒数、AM/PM）
• 如果只要时分（不显秒），可用 toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})

如何避免首次渲染空白或闪动

DOM 元素还没加载完就执行 JS，getElementById 会返回 null，后续更新直接报错：Cannot set property 'textContent' of null。

• 把脚本放在

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！