最稳妥方式是用 setinterval 每秒调用 updateclock() 更新 textcontent；需预缓存元素、手动拼接时间、避免 document.write 和 settimeout 递归，并在页面隐藏时清除定时器。
静态 HTML 页面本身不能动态显示时间，必须靠 JavaScript 每次读取 new Date() 并主动更新 DOM；只写一次不刷新，或者用 document.write()，都会失效或清空页面。
用 setInterval 每秒更新 textContent
这是最稳妥、兼容性最好、也最容易排查问题的方式。关键不是“怎么动”，而是“怎么不动错”：
- 把时间容器设为
<div id="clock"></div>或<p id="clock"></p>，避免用innerHTML覆盖子节点 - 提前缓存元素引用：
const clockEl = document.getElementById('clock');，别在定时器里反复查 DOM - 用
textContent而非innerText—— 后者受 CSSdisplay: none影响，前者稳定 - 初始化时先调用一次
updateClock()，再启动setInterval，避免首屏空白 - 时间格式推荐手动拼接 +
padStart(2, '0')，比如String(date.getHours()).padStart(2, '0')，比toLocaleTimeString()更可控
为什么别用 setTimeout 递归或 document.write
这两个是新手高频踩坑点，表面能跑，实则埋雷：
-
document.write()在页面加载完成后调用会直接清空整个文档，现代浏览器控制台会报DOMException -
setTimeout(update, 1000)递归调用，一旦某次执行卡顿（比如主线程忙），下一次就会延迟，导致跳秒甚至堆积多个未执行任务 -
setInterval是固定周期触发，即使某次执行慢了，下一次仍按原节奏来，只要函数内逻辑轻量，就不会累积误差
需要年月日+星期？补全字段但别硬套 toLocaleString()
想显示“2026年8月27日 星期四 15:20:33”，手动组合比依赖浏览器本地化更可靠：
- 月份和日期要加 1 和补零：
date.getMonth() + 1、String(date.getDate()).padStart(2, '0') - 星期几用数组映射：
['星期日', '星期一', ..., '星期六'][date.getDay()] - 避免直接用
date.toLocaleString('zh-CN')—— Safari 对weekday: 'long'支持不稳定，Windows 和 macOS 中文环境输出顺序也可能不同 - 如果真要用
Intl.DateTimeFormat，至少指定完整选项：new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
真正容易被忽略的不是“怎么写”，而是“什么时候开始”和“什么时候停”。如果页面可能长期驻留（比如后台管理页），记得监听 visibilitychange 事件，在标签页切走时 clearInterval，回来再恢复，否则定时器照常跑，浪费资源还可能导致时间错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
