倒计时开屏广告需用 fixed 定位全屏遮罩并设 pointer-events: auto 阻断交互；避免 display: none 切换导致透出，应监听图片加载完成再启计时；用 Date.now() 计算剩余时间比 setInterval 更精准。
倒计时开屏广告怎么遮住底层内容？
遮不住 = 用户能点按钮、滚动页面、甚至提交表单，广告形同虚设。关键不是“放个 div”，而是用 CSS 构建一个真正阻断交互的全屏层。
必须满足三点：position: fixed + top: 0; left: 0; width: 100vw; height: 100vh + pointer-events: auto（默认即如此，但显式写上更安心）。
常见错误：
- 只设
z-index却没固定定位，滚动后广告消失 - 用
display: none切换主内容区，但忘了给遮罩层加background-color: #fff，导致文字透出 - 遮罩内图片加载慢，用户看到白屏却还在倒计时——应监听
img.onload后再启动计时器
为什么 setInterval 倒计时经常少 1 秒？
不是浏览器不准，是 JS 执行时机偏差累积出来的。比如页面加载慢、主线程卡顿，setInterval 第一次回调可能在 1050ms 后才触发，后续每次又延迟一点，5 秒后实际只走了 4 次回调。
立即学习“前端免费学习笔记（深入）”；
更可靠的做法是用 Date.now() 记起点，每帧算剩余毫秒数：
const start = Date.now();
const duration = 5000;
const timer = setInterval(() => {
const remaining = Math.ceil((start + duration - Date.now()) / 1000);
if (remaining <= 0) {
clearInterval(timer);
document.getElementById('splash').style.display = 'none';
document.getElementById('main-content').style.display = 'block';
} else {
document.getElementById('countdown').textContent = remaining;
}
}, 100);
这样即使某次回调延迟，下一次也能校准，不会丢秒。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
点击“跳过”没反应？先查这三处
90% 的“跳过失效”问题出在执行顺序或状态冲突，不是代码逻辑错。
务必检查：
-
document.getElementById('skip')是否在 DOM 加载完才获取？没包裹DOMContentLoaded或放</body>前，返回null而不报错 - 跳过函数和倒计时归零函数是否都调用了
showMain()，但里面一个写display: block，另一个写display: none？状态没统一就互相覆盖 - 是否对同一元素多次绑定
click事件？比如刷新页面后旧监听器还在，新监听器又加一遍，点一次触发两次跳转
window.location.href 还是 replace？
选哪个取决于用户要不要能按「返回」回到广告页。
window.location.href = '/home' 会把当前页留在历史栈里，用户点返回就回到开屏广告；window.location.replace('/home') 是直接替换，不留记录。
对开屏广告场景，replace 更合理——用户没理由想退回那个已关闭的广告。但要注意：replace 不会触发 beforeunload，如果你有未保存表单数据要提醒，得在跳转前手动拦截。
另外，如果页面是 Vue/React 单页应用，别直接改 location，优先用 router.push() 或 useNavigate()，避免整页刷新破坏应用状态。
