用 position: fixed + setInterval 实现不随滚动偏移、不卡顿的动态时间显示，需设置 top/right 或 bottom/left 偏移值、z-index: 1000，缓存 DOM 节点，监听 visibilitychange 控制定时器，并用 padStart 补零、toLocaleDateString 处理星期。
直接在页面右上角或左下角固定显示动态时间，关键不是“放哪儿”，而是“怎么让位置不随滚动偏移 + 时间不卡顿”。用 position: fixed 配合 setInterval 是最稳的组合，但容易忽略 z-index 层级和首次渲染时机。
用 CSS fixed 定位把时间钉在角落
HTML 元素本身没有“角落”属性，得靠 CSS 控制。常见错误是只写 position: fixed 却漏掉 top/right 等偏移值，导致元素堆在左上角原点。
- 右上角：加
top: 12px; right: 12px;（数值可调，12px 是防边框挤压的常用值） - 左下角：用
bottom: 12px; left: 12px; - 必须设
z-index: 1000;，否则可能被轮播图、弹窗、广告遮住 - 建议用
<div id="corner-clock"></div>而非<time>，后者语义正确但 fixed 布局下兼容性略弱
setInterval 每秒更新时的三个坑
setInterval(updateTime, 1000) 看似简单，实际运行中常出现跳秒、卡顿、内存泄漏。根本原因是浏览器标签页切走后定时器还在跑，且 DOM 更新没做节流。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 别用
innerHTML写时间——有 XSS 风险，改用textContent - 不要在 setInterval 回调里反复调用
document.getElementById，提前缓存节点：const clockEl = document.getElementById("corner-clock"); - 加 visibilitychange 监听：标签页不可见时
clearInterval，回来再重启，省资源也防跳秒 - 避免每毫秒都更新：
setInterval的 1000ms 不等于精准 1 秒，秒数变更时才重绘更稳（可用now.getSeconds() !== lastSec判断）
时间格式化要避开 getMonth() 返回 0–11 的陷阱
直接拼接 date.getMonth() + 1 很常见，但一旦忘记 +1，3 月就变 2 月；个位数不补零，“9:5:7”这种格式在角落里极难读清。
立即学习“前端免费学习笔记（深入）”；
- 月份、日期、小时、分钟、秒全部用
String(n).padStart(2, "0")补零 - 星期几别硬写数组映射，用
date.toLocaleDateString("zh-CN", { weekday: "short" })更可靠 - 如果只要时分秒，别调
toLocaleString()—— 它可能带年份和逗号，体积大还难对齐 - 示例片段：
const h = String(now.getHours()).padStart(2, "0");
真正难的不是把时间贴到角落，而是让它在页面滚动、切换标签、长时间挂后台后依然准、不闪、不抢焦点。fixed 定位和定时器只是骨架，补零逻辑、可见性判断、DOM 缓存才是让时钟“活”下来的部分。
