酷秀博客
首页/固定首屏五秒图片广告A I

固定首屏五秒图片广告

admin的头像admin3个月前A I121热度

用HTML构建广告与内容结构，CSS固定首屏全屏广告，JS用setInterval倒计时，结束后隐藏广告、显示内容，支持手动跳过。

实现代码（可直接运行）

<!DOCTYPE html><br />
<html lang="zh-CN"><br />
<head><br />
    <meta charset="UTF-8"><br />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
    <title>首屏广告倒计时</title><br />
    <style><br />
        * { margin: 0; padding: 0; box-sizing: border-box; }<br />
        /* 广告容器：首屏全屏、层级最高 */<br />
        #ad-container {<br />
            position: fixed;<br />
            top: 0; left: 0;<br />
            width: 100vw; height: 100vh;<br />
            background: #000;<br />
            z-index: 9999;<br />
            display: flex;<br />
            align-items: center;<br />
            justify-content: center;<br />
        }<br />
        #ad-img { width: 100%; height: 100%; object-fit: cover; }<br />
        /* 倒计时与跳过按钮：右上角悬浮 */<br />
        .countdown, .skip {<br />
            position: absolute;<br />
            top: 20px;<br />
            padding: 8px 16px;<br />
            border-radius: 20px;<br />
            color: #fff;<br />
            font-weight: bold;<br />
            cursor: pointer;<br />
        }<br />
        .countdown { right: 80px; background: rgba(0,0,0,0.6); }<br />
        .skip { right: 20px; background: #e53935; }<br />
        /* 页面内容：默认隐藏，广告结束后显示 */<br />
        #main-content {<br />
            display: none;<br />
            min-height: 100vh;<br />
            padding: 20px;<br />
            font-size: 18px;<br />
        }<br />
    </style><br />
</head><br />
<body><br />
    <!-- 广告容器 --><br />
    <div id="ad-container"><br />
        <img id="ad-img" src="your-ad-image.jpg" alt="首屏广告"><br />
        <div class="countdown" id="countdown">5</div><br />
        <div class="skip" id="skip">跳过</div><br />
    </div><br />
    <!-- 页面主内容 --><br />
    <div id="main-content"><br />
        <h1>页面主内容</h1><br />
        <p>广告倒计时结束，显示正常内容...</p><br />
    </div><br />
<br />
    <script><br />
        document.addEventListener('DOMContentLoaded', () => {<br />
            const ad = document.getElementById('ad-container');<br />
            const content = document.getElementById('main-content');<br />
            const countdownEl = document.getElementById('countdown');<br />
            const skipBtn = document.getElementById('skip');<br />
            let timeLeft = 5; // 倒计时5秒<br />
<br />
            // 倒计时逻辑<br />
            const timer = setInterval(() => {<br />
                timeLeft--;<br />
                countdownEl.textContent = timeLeft;<br />
                if (timeLeft <= 0) {<br />
                    clearInterval(timer);<br />
                    ad.style.display = 'none';<br />
                    content.style.display = 'block';<br />
                }<br />
            }, 1000);<br />
<br />
            // 跳过按钮<br />
            skipBtn.addEventListener('click', () => {<br />
                clearInterval(timer);<br />
                ad.style.display = 'none';<br />
                content.style.display = 'block';<br />
            });<br />
        });<br />
    </script><br />
</body><br />
</html><br />
打赏反馈赞 0

#免责声明#

本文为转载 或 原创内容，未经授权禁止转载、摘编、复制及镜像使用、转载请注明作者、出处及原文链接、违者将依法追究责任。

签名： 最忠诚的BUG开发者来自: 重庆市. Chrome浏览器
文章目录