必须用 JavaScript 动态更新 DOM：通过 setInterval 每秒调用 new Date() 获取当前时间，用 toLocaleTimeString('zh-CN') 或手动格式化（补零）后赋值给指定元素的 textContent，避免 innerHTML 覆盖、document.write 清空页面，并提供服务端时间 fallback。
用 new Date() 获取当前时间，但别直接写死在 HTML 里
HTML 本身没有动态能力，<p>当前时间：2024-06-15</p> 这种写法永远不变。真要显示系统时间，必须靠 JavaScript 实时读取并更新 DOM。核心就是每次调用 new Date() 得到当前时刻对象，再格式化成你需要的字符串。
常见错误是只执行一次、不刷新——比如写在 <script> 标签里但没用定时器，页面加载完就停了。动态显示的前提是「持续更新」。
- 用
setInterval()每秒调用一次更新函数（精度够用，避免高频重绘） - 不要用
setTimeout()递归调用，容易因执行延迟导致跳秒或堆积 - 格式化推荐用
date.toLocaleTimeString()或手动拼接date.getFullYear()等方法，别依赖date.toString()—— 输出格式不统一，中文系统和英文系统表现不同
把时间塞进指定 <span> 或 <div> 元素里
不能靠 document.write()（已过时，会清空整个页面），也不能用 innerHTML = ... 直接覆盖父容器（可能删掉其他内容）。稳妥做法是给目标元素加 id，然后用 textContent 更新。
示例 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div>现在是：<span id="clock"></span></div>
对应 JS：
function updateClock() {
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false });
document.getElementById('clock').textContent = timeStr;
}
setInterval(updateClock, 1000);
-
toLocaleTimeString('zh-CN')确保显示“14:23:05”而非“2:23:05 PM” - 用
textContent而非innerText—— 后者受 CSS 影响（比如display: none的元素会被忽略），前者更可靠 - 别在
setInterval里反复调用getElementById，可以提前缓存const clockEl = document.getElementById('clock')
需要年月日时分秒？手拼比 toLocaleString() 更可控
toLocaleString() 看似省事，但不同浏览器对选项支持不一，比如 Safari 对 timeZoneName: 'short' 支持差，且中文 Windows 和 macOS 下默认格式仍有差异。真要稳定输出 2024-06-15 14:23:05，建议手动格式化。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键点：
- 月份、日期、小时、分钟、秒都可能是个位数，必须补零：
String(date.getDate()).padStart(2, '0') - 别用
date.getMonth() + 1后不补零——6月会变成“6”，不是“06” - 如果只要日期部分，别漏掉
getFullYear()；getYear()已废弃，返回的是距 1900 年的年份差
简短示例：
function formatDate(date) {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
}
页面加载慢或 JS 报错时，时间区域别留白
如果用户禁用 JS，或者脚本加载失败，<span id="clock"></span> 会空着，体验突兀。可在 HTML 中预先填一个服务端时间（静态 fallback），再用 JS 覆盖。
例如后端 PHP 输出：<span id="clock"><?php echo date('H:i:s'); ?></span>；Node.js 模板里插 {{ new Date().toLocaleTimeString() }}。这样即使 JS 不工作，也有个大致准确的时间。
另一个坑：某些老旧安卓 WebView 对 setInterval 在后台标签页中会暂停或降频，导致时间“卡住”。如果必须高保真，得监听 visibilitychange 事件，在切回前台时强制刷新一次。
真正难的不是写几行代码，而是想清楚要不要处理时区、是否接受 1 秒误差、JS 失效时怎么兜底——这些细节不处理，上线后就会被用户截图发群里问“你们时间不准”。
