用 new date() 动态更新时间需结合 setinterval 每秒调用 updateclock 函数刷新 dom，避免 document.write() 和重复查 dom；注意时区控制、浏览器兼容性、页面可见性导致的节流问题及是否显示秒数等细节。
用 JavaScript 的 new Date() 获取并更新时间
浏览器里没法直接靠 HTML 渲染系统时间，必须用 JavaScript 动态读取和刷新。最直接的方式是调用 new Date() 创建当前时间对象，再用 toLocaleTimeString() 或手动拼接格式化字符串。
关键点在于：不能只执行一次，否则页面加载完就定格了。得用 setInterval() 每秒更新一次 DOM 元素内容。
- 把显示时间的元素加上明确的
id，比如<div id="clock"></div> - 在
<script></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></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
