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

固定首屏五秒图片广告

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

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

实现代码（可直接运行）

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

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const ad = document.getElementById('ad-container');
            const content = document.getElementById('main-content');
            const countdownEl = document.getElementById('countdown');
            const skipBtn = document.getElementById('skip');
            let timeLeft = 5; // 倒计时5秒

            // 倒计时逻辑
            const timer = setInterval(() => {
                timeLeft--;
                countdownEl.textContent = timeLeft;
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    ad.style.display = 'none';
                    content.style.display = 'block';
                }
            }, 1000);

            // 跳过按钮
            skipBtn.addEventListener('click', () => {
                clearInterval(timer);
                ad.style.display = 'none';
                content.style.display = 'block';
            });
        });
    </script>
</body>
</html>
打赏反馈赞 0

#免责声明#

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

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