js流氓小广告案例_adverloop()-CSDN博客

本文链接：https://blog.csdn.net/weixin_53366569/article/details/129824277

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
            /* 小广告默认隐藏 */
            display: none;
        }

        .adver-top {
            font-size: 14px;
            line-height: 30px;
        }

        .adver-top .adver-title {
            text-indent: 10px;
        }

        .adver-top .adver-close {
            padding: 0 5px;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="adver">
        <div class="adver-top">
            <div class="adver-title">距离广告关闭还有10秒</div>
            <div class="adver-close">X</div>
        </div>
        <div class="adver-detail">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div>
</body>
<script>
    // 动态操作小广告(默认隐藏)

    // 1. 延迟5s显示小广告
    // 2. 倒计时10秒后关闭小广告
    // 3. 重复 1 - 2 两步
    // 4. 点击 x  关闭小广告
    // 5. 重复 1 - 2 两步

    // JS操作元素改变样式时 一般都是通过内联样式实现的

    var adver = document.getElementsByClassName("adver")[0];
    var adverTitle = document.getElementsByClassName("adver-title")[0];
    var adverClose = document.getElementsByClassName("adver-close")[0];

    var dTimer = null; 
    var iTimer = null;

    // 循环播放小广告
    adverLoop();

    // 关闭小广告:
    adverClose.onclick = function(){
        // 只清除延时器时没有用的  => 小广告不出现没有办法点击关闭按钮 => 等小广告出现时,计时器已经启动 , 只清除延时器 计时器还是一样会运行 -> 倒计时结束开启下一次  
        // 解决方法 => 两个都清除!!
        clearTimeout(dTimer);
        clearInterval(iTimer);
        adver.style.display = "none";
        
        adverLoop();
    }   

    // 延迟5s显示小广告
    function adverLoop() {
        clearTimeout(dTimer);  // 注意 计时器/延时器 在函数和事件中使用时, 每次开启下一个之前要先清除上一个 => 保证始终只有一个
        dTimer =  setTimeout(function () {
            adver.style.display = "block";

            var count = 10;
            adverTitle.textContent = `距离广告关闭还有${count}秒`;  // 下次重新展示计时
            iTimer = setInterval(function () {
                count--;
                adverTitle.textContent = `距离广告关闭还有${count}秒`;
                if (count <= 0) { // 倒计时结束
                    adver.style.display = "none";
                    clearInterval(iTimer);

                    // 等待倒计时结束 -> 重新开启下一次
                    adverLoop();

                }
            }, 1000)
        }, 5000);
    }

</script>

</html>