用 setInterval 每秒调用 updateTime 函数，通过 new Date().toLocaleTimeString('zh-CN', {hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'}) 获取格式化时间，再赋值给 document.getElementById('clock').textContent 即可实现稳定、安全、兼容的实时时间显示。
直接用 setInterval 配合 new Date() 就能实时更新，不需要框架、不依赖服务器，纯前端就能跑通。
怎么让页面上某个元素每秒显示当前时间？
核心是获取时间、格式化、写入 DOM，再定时刷新。关键不是“怎么动”，而是“怎么动得稳且不卡”：
- 用
document.getElementById或document.querySelector定位要更新的元素，比如一个<span id="clock"></span> - 每次更新前先调用
new Date()，再用.toLocaleTimeString()获取本地格式（避免手动拼接时区错误） - 把时间字符串赋给元素的
textContent，别用innerHTML——没 HTML 内容时更安全、更快 - 用
setInterval控制刷新频率，1000毫秒最常用；但注意：如果页面切到后台标签页，浏览器可能节流到 1s 以上，这是正常行为
为什么 toLocaleTimeString() 比手拼 getHours() + getMinutes() 更推荐？
零基础最容易在这里翻车：自己拼时间容易漏掉补零、忽略夏令时、错判 AM/PM，还可能在不同系统上表现不一致。
-
toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })能自动对齐中文用户习惯（24 小时制、双位数） - 传参明确，可读性强；而
getHours() < 10 ? '0' + getHours() : getHours()这类逻辑容易写错、难维护 - 兼容性好：Chrome 24+、Firefox 29+、Safari 14+、Edge 12+ 全支持，老 IE 不在考虑范围内
常见错误：时间不动、报错 Cannot set property 'textContent' of null
这不是时间逻辑的问题，90% 是 DOM 加载时机或选择器写错了。
立即学习“前端免费学习笔记（深入）”；
- 脚本必须放在
</body>前，或者加DOMContentLoaded监听——否则getElementById找不到元素 - ID 名写错大小写或多了空格，比如 HTML 里是
id="Clock"，JS 却写getElementById('clock') - 用了
querySelector却忘了加#，比如querySelector('clock')应该是querySelector('#clock') - 函数定义了但没调用，或
setInterval的第一个参数写成updateTime()（带括号就变成立即执行，不是传函数引用）
一个可直接粘贴运行的最小可用示例
复制下面代码保存为 time.html，双击打开即可看到跳动的时间：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<span id="clock"></span>
<script>
function updateTime() {
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('clock').textContent = timeStr;
}
updateTime(); // 立即显示一次，避免首屏空白
setInterval(updateTime, 1000);
</script>
</body>
</html>
真正容易被忽略的是：时间精度本身不等于视觉流畅度。即使设成 500 毫秒刷新，人眼也很难察觉区别，反而增加 CPU 开销；保持 1000 是平衡点。另外，如果后续要加日期、星期、毫秒等，建议统一用 Intl.DateTimeFormat 替代一堆 getXXX() 调用——它才是现代时间处理的正确起点。
