最稳妥的时钟实现是将脚本置于</body>前或用DOMContentLoaded监听，用textContent更新、手动补零格式化时间并立即执行一次updateClock。
直接用 setInterval 每秒调用一次 new Date() 并写入 DOM 是最稳妥的起点，但必须确保 DOM 已就绪、避免重复绑定、且优先用 textContent 而非 innerHTML。
DOM 元素存在且可访问是前提
如果脚本在 <body> 开头执行，而目标元素在下方，document.getElementById('clock') 会返回 null，后续更新全部静默失败。这不是语法错误，也不会报错，容易误判为逻辑问题。
- 把
<script>放在</body>前是最简单可靠的方案 - 或用
document.addEventListener('DOMContentLoaded', ...)包裹初始化逻辑 - 避免使用
window.onload，它等所有资源（含图片）加载完才触发，延迟明显
用 textContent 更新比 innerHTML 更安全也更快
innerHTML 会触发 HTML 解析和重排，哪怕你只塞纯数字字符串；更关键的是，若未来时间字符串意外混入用户输入或外部数据，innerHTML 可能执行任意脚本——这是 XSS 风险点。而 textContent 纯文本输出，无解析、无风险、性能略优。
- 写法：
document.getElementById('clock').textContent = formattedTime; - 不要写成
.innerHTML = formattedTime，除非你明确需要渲染 HTML 标签（比如加<span>高亮某部分） - 初始占位可用
<p id="clock">--:--:--</p>，避免首次更新前空白
格式化时注意 getMonth() 和 padStart() 的坑
getMonth() 返回 0–11，不是 1–12；getDate() 和 getHours() 等则正常从 1 或 0 开始。直接拼接会导致“2026-8-26”这种不补零格式，视觉松散；而手动 String(n).padStart(2, '0') 是目前最轻量、兼容性最好的补零方式（IE11+ 支持）。
立即学习“前端免费学习笔记（深入）”；
- 月份要 +1：
const month = String(date.getMonth() + 1).padStart(2, '0'); - 小时/分钟/秒统一补零：
String(date.getHours()).padStart(2, '0') - 避免用
toLocaleTimeString()直接输出——它受用户系统区域设置影响，中文 Win10 默认带“上午/下午”，英文系统则可能输出 “AM/PM”，不可控
完整可运行代码（复制即用）
以下代码已避开上述所有典型陷阱，支持年月日时分秒全显，放在任何 HTML 文件末尾即可运行：
<div id="clock">--:--:--</div>
<script>
function updateClock() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hour = String(now.getHours()).padStart(2, '0');
const minute = String(now.getMinutes()).padStart(2, '0');
const second = String(now.getSeconds()).padStart(2, '0');
const timeStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
document.getElementById('clock').textContent = timeStr;
}
updateClock(); // 立即显示一次，避免首屏空白
setInterval(updateClock, 1000);
</script>
真正难的不是写出来，而是让时间在各种网络延迟、页面切换、标签页休眠后仍保持秒级准确——这需要更复杂的机制（如用 requestAnimationFrame + 时间差校准），但对绝大多数展示型页面，setInterval 加上 DOM 就绪保障和格式化细节，已经足够稳。
