倒计时开屏广告需遮罩层（全屏fixed覆盖，含img、countdown、skip）和主内容区（display:none）；JS用setInterval每秒更新倒计时，从Date.now()起算，归零时清除定时器并显示主内容。
倒计时开屏广告需要哪些基础 DOM 结构？
必须有两块区域：遮罩层（广告展示区）和主内容区（index.html原本页面）。遮罩层默认 display: block，主内容区默认 display: none。不能靠 z-index 叠加后仅隐藏广告图——那样用户仍可点击/滚动底层内容，不符合“开屏”逻辑。
常见错误是把广告写成一个 div 浮在顶部，但没阻断交互。正确做法是用全屏 div 覆盖整个视口，并设置 pointer-events: auto（默认即如此），确保点击、触摸都落在遮罩上。
- 遮罩层需设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 内部至少包含：
<img src="ad.jpg" alt="index.html如何实现倒计时开屏广告？" >、<span id="countdown">5</span>、<button id="skip">跳过</button> - 主内容区建议包在
<main id="main-content"></main>中，初始加style="display:none"
如何用 JavaScript 实现精确的 5 秒倒计时并自动跳转？
别用 setTimeout 直接延时 5000ms 后隐藏——它不显示数字，也不响应手动跳过。要用 setInterval 每秒更新 countdown 元素，并在归零时触发切换。
关键细节：倒计时必须从服务端或本地时间可信起点开始（比如 Date.now()），避免因 JS 执行延迟导致少计 1 秒；归零瞬间要清除定时器，否则可能触发多次回调。
立即学习“前端免费学习笔记（深入）”；
let remaining = 5;
const timer = setInterval(() => {
document.getElementById('countdown').textContent = --remaining;
if (remaining <= 0) {
clearInterval(timer);
document.getElementById('splash').style.display = 'none';
document.getElementById('main-content').style.display = 'block';
}
}, 1000);
- 务必在
<script></script>标签中将这段代码放在 DOM 元素之后，或包裹在DOMContentLoaded里 - 不要用
innerText更新倒计时——IE 下可能触发重排；textContent更稳妥 - 如果广告图加载慢，可在
img.onload后再启动倒计时，避免白屏期间就开计时
用户点“跳过”按钮时为什么有时没反应？
最常见原因是事件监听写在了 DOM 尚未就绪的位置，或者用了 onclick="skipAd()" 但函数定义在后面且没声明提升（尤其是用了 const 或 let 声明函数）。
另一个隐蔽问题是：跳过操作和倒计时归零操作做了重复的 DOM 切换，但没统一状态管理，导致 main-content 被设为 block 后又被设回 none（比如两个逻辑都调用了 showMain() 但里面写了相反逻辑）。
- 推荐把显示主内容封装成单一函数：
function showMain() { ... }，倒计时归零和跳过都只调它 - 跳过按钮绑定用
addEventListener，而非内联onclick，避免执行时机不可控 - 点击后立即
clearInterval(timer)，防止倒计时还在跑、几毫秒后又切回去
移动端真机测试时倒计时卡顿或跳变怎么办？
某些安卓 WebView 或 iOS Safari 在页面后台/锁屏时会冻结 setInterval，切回前台后一次性补发多个 tick，造成倒计时从 5→2→0 跳变。这不是代码 bug，而是浏览器节电策略。
解决思路不是“修复计时器”，而是改用时间差计算：记录开始时间，每次检查 Math.floor((now - start) / 1000) 得到已过秒数，再用 5 - passed 算剩余。这样即使中间卡住，恢复后也能正确续算。
- 初始化时记下
const startTime = Date.now() - 用
requestAnimationFrame替代setInterval做高频检查（每帧都算一次），更贴合渲染节奏 - 注意：不要在
raf回调里频繁读写textContent，应只在数值变化时更新
倒计时本身很简单，难的是在各种加载时机、浏览器行为、用户操作交叉下保持状态一致。最常被忽略的其实是「广告图加载完成前不该开始倒计时」和「跳过动作必须同步终止所有定时逻辑」这两点。
