用 setTimeout 实现版权到期提醒需基于服务端时间戳计算延迟，仅在 delay > 0 时触发提示；避免 setInterval 防内存泄漏，禁用本地时间以防篡改；结合 visibilitychange 检测页面可见性并防重复通知，辅以 banner、水印和后端鉴权兜底。
怎么用 setTimeout 实现到期倒计时提醒
浏览器里没法真正“锁住”页面或强制弹窗，所以版权到期提醒本质是前端主动轮询 + 用户感知。最轻量、兼容性最好的做法就是用 setTimeout 定时触发一次提示——别用 setInterval 持续跑，容易内存泄漏，也浪费资源。
关键点在于：时间必须基于服务端下发的到期时间戳（比如 2025-06-30T23:59:59Z），不能信客户端本地时间。用户改系统时间会导致倒计时错乱甚至不触发。
- 先通过接口或内联脚本拿到服务端传来的
expireTimestamp（毫秒级） - 计算差值：
const delay = expireTimestamp - Date.now() - 只在
delay > 0且delay （一周内）时才设 <code>setTimeout - 超时回调里用
alert()或更友好的document.getElementById('notice').style.display = 'block'
示例：
const expireTimestamp = 1748678399000; // 2025-06-30 23:59:59
const now = Date.now();
const delay = expireTimestamp - now;
if (delay > 0 && delay < 7 * 24 * 60 * 60 * 1000) {
setTimeout(() => {
document.querySelector('.copyright-notice').classList.add('show');
}, delay);
}为什么不能直接写死 HTML 里的“X日到期”文本
静态 HTML 里的文字不会自动更新。哪怕你写了“授权将于2025年6月30日到期”，过了那天它还是显示同一条——用户刷新页面也不会变，除非你重新部署 HTML 文件。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真实场景中，版权状态可能提前终止、延长，或按用户订阅周期动态变化。硬编码等于放弃控制权。
- 服务端渲染时注入变量（如 PHP 的
<span>授权将于</span><span data-expire="<?php echo $expireDate; ?>"></span>）更可靠 - 纯静态站点可用构建时注入，比如 Webpack DefinePlugin 替换
process.env.COPYRIGHT_EXPIRE - 千万别用 JS 拼接日期字符串再 innerHTML 插入，容易 XSS，尤其当日期来自用户输入时
document.visibilityState 能否用来延迟提醒？
可以，但得慎用。如果用户标签页切走了，setTimeout 依然会执行（现代浏览器已不冻结定时器），但弹窗可能被拦截，或者用户根本没看到。
更合理的做法是：检测到页面重新可见（visibilitychange 事件），再检查是否已过期或临近到期，然后展示提醒。
- 监听
document.addEventListener('visibilitychange', ...) - 回调里判断
document.visibilityState === 'visible'且Date.now() >= expireTimestamp - 避免重复触发：加个
hasNotified标志位，通知后置为true - 注意 Safari 对 background tab 的定时器节流更激进，单纯依赖
setTimeout可能延迟数分钟
版权提醒被屏蔽或用户忽略怎么办
浏览器对 alert() 拦截越来越严，尤其在非用户手势触发上下文里；而纯 CSS 提示又容易被滚动或样式覆盖隐藏。没有银弹，只能分层应对。
- 首屏固定位置加一个带关闭按钮的 banner（
position: sticky或fixed），比弹窗更难忽略 - 在素材容器上叠加半透明水印层，文字包含到期日期（需服务端生成或 canvas 动态绘制）
- 关键操作前二次校验：比如点击“导出”按钮时，JS 主动查
Date.now() > expireTimestamp，阻止动作并高亮提示 - 别依赖前端限制行为——版权控制必须由后端鉴权兜底，前端提醒只是辅助
最容易被忽略的是水印里的日期格式：用 YYYY-MM-DD 而不是“还有3天”，否则到期后水印文字就失效了。真要写倒计时，得用 canvas 或 SVG 动态渲染，不然缓存一压，字就僵在那儿了。
