用 new Date() 动态更新时间需结合 setInterval 每秒调用 updateClock 函数刷新 DOM，避免 document.write() 和重复查 DOM；注意时区控制、浏览器兼容性、页面可见性导致的节流问题及是否显示秒数等细节。
用 JavaScript 的 new Date() 获取并更新时间
浏览器里没法直接靠 HTML 渲染系统时间，必须用 JavaScript 动态读取和刷新。最直接的方式是调用 new Date() 创建当前时间对象，再用 toLocaleTimeString() 或手动拼接格式化字符串。
关键点在于：不能只执行一次，否则页面加载完就定格了。得用 setInterval() 每秒更新一次 DOM 元素内容。
- 把显示时间的元素加上明确的
id，比如<div id="clock"></div> - 在
<script>里先获取该元素，再用setInterval每 1000ms 调用一次更新函数 - 避免用
document.write()—— 它会覆盖整个页面，只用element.textContent或innerHTML
<div id="clock"></div>
<script>
const clock = document.getElementById('clock');
function updateClock() {
const now = new Date();
clock.textContent = now.toLocaleTimeString('zh-CN'); // 显示如 "上午10:23:45"
}
updateClock(); // 立即执行一次，避免首屏空白
setInterval(updateClock, 1000);
</script>
时区问题：toLocaleTimeString() 默认用本地时区
大多数场景下这正是你想要的——显示用户自己电脑/手机设置的系统时间。但要注意：new Date() 构造的时间对象本身不含时区偏移信息，它只是基于浏览器所在环境的时区解释的。
- 如果服务器部署在海外，而你想始终显示东八区时间（如北京时间），就不能依赖
toLocaleTimeString()的默认行为 - 改用
toLocaleTimeString('zh-CN', { timeZone: 'Asia/Shanghai' }) - 注意：部分老旧浏览器（如 IE）不支持
timeZone选项，需做兼容判断或用第三方库如moment-timezone
避免频繁重排：别在 setInterval 里反复创建 DOM 元素
常见错误是把 document.getElementById('clock') 写进定时器回调里，每次执行都重新查一遍 DOM。虽然对小页面影响不大，但属于低效写法，也容易在元素不存在时抛出 TypeError。
立即学习“前端免费学习笔记（深入）”；
- 把
getElementById提到定时器外，只查一次 - 确保脚本在对应 DOM 元素之后执行，或把
<script>放在</body>前，或加DOMContentLoaded监听 - 如果页面有多个时间显示区域，不要为每个都开一个
setInterval，统一用一个定时器批量更新
移动端键盘弹出、页面切后台时，setInterval 可能被节流
Android/iOS 在页面不可见或系统资源紧张时，会降低 setInterval 的执行频率（比如从 1000ms 拉长到几秒），导致时间跳变明显。这不是 bug，是浏览器主动节电策略。
- 用
performance.now()+ 时间差校准，比单纯依赖setInterval更准 - 监听
visibilitychange事件，在页面回到前台时强制同步一次时间 - 对精度要求不高（比如只要显示“大概几点”）的场景，其实默认
setInterval就够用
真正容易被忽略的是：时间格式中是否包含秒。很多设计稿只写“10:23”，但用户其实会下意识看秒数来判断是否“刚过整点”。要不要显示秒，得看实际交互需求，而不是默认加或不加。
