用 setInterval + new Date() 每秒更新时间最直接,需确保 DOM 就绪、避免只执行一次、用 toLocaleTimeString() 格式化防补零错误,并每次回调重新获取时间防累积误差。

用 setInterval + new Date() 更新页面时间最直接
浏览器里没法“自动刷新”时间,必须靠 JS 定时重读系统时间并写入 DOM。核心就是每秒调用一次 new Date(),格式化后塞进某个元素的 innerText 或 innerHTML。
常见错误是只执行一次——比如把 new Date() 写在页面加载时就赋值,之后再也不更新;或者 setInterval 回调里没真正更新 DOM,只是重新生成了字符串却没插入。
- 推荐用
setInterval(updateTime, 1000),间隔设为1000而不是60000(否则分钟跳变会延迟最多 59 秒) - 不要用
document.write(),它会清空整个页面;改用document.getElementById('time').textContent = formatted - 注意时区:
toLocaleTimeString()默认用本地时区,如果需 UTC,改用toUTCString()或手动计算偏移
格式化时间字符串时别硬拼接,优先用 toLocaleTimeString()
手写 date.getHours() + ':' + date.getMinutes()... 容易漏补零(比如 9:5 显示成 9:5 而非 09:05),也难适配 AM/PM 或多语言。
toLocaleTimeString() 是最省心的选择,它能自动处理零填充、12/24 小时制、本地化分隔符:
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
参数对象里 hour12: false 强制 24 小时制;省略则按系统设置走。不同浏览器对 locale 支持略有差异,'zh-CN' 在 Chrome/Firefox/Edge 均可用,但 Safari 对部分选项支持较晚。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
避免 setInterval 累积误差导致秒数跳变不准
JS 的 setInterval 不是精确计时器,尤其页面切到后台或 CPU 负载高时,回调可能延迟甚至被跳过,造成“卡一秒”或“连跳两秒”。
- 更稳的做法是每次回调都重新取
new Date(),而不是靠 setInterval 的理论节奏推算时间 - 不要用
setTimeout递归模拟 setInterval,除非你手动清除上一个 timer,否则容易内存泄漏 - 如果要求毫秒级精度(比如倒计时),得用
performance.now()做差值校准,普通实时钟没必要
内联脚本放 底部或加 defer,别阻塞渲染
时间显示依赖 DOM 元素存在,如果脚本放在 且没做等待,document.getElementById() 会返回 null,后续更新直接报错:Cannot set property 'textContent' of null。
两个稳妥做法:
- 把
<script></script>放在前,确保 DOM 已解析完毕 - 或者在
中加defer属性:<script defer src="clock.js"></script>,它保证脚本执行前 DOM 构建完成
顺带一提:用 DOMContentLoaded 事件也能解决,但多一层嵌套,对简单场景属于过度设计。
时间显示看着简单,真正上线时最容易栽在 DOM 查找时机、时区混淆和 setInterval 的“假准时”上。尤其是跨时区用户访问时,别默认所有人的 toLocaleTimeString() 行为一致。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










