倒计时广告关闭案例实现 js js小技巧

效果

在这里插入图片描述

做这个背景缘由

看 pink 老师的视频时候讲到了 5秒之后自动关闭，然后弹幕有句话就说怎么做倒计时的广告呢，然后就花了10多分钟写了一下，东西不难，大盒子套小盒子，图片当成背景图片，全填充，相对位置的简单试错。

代码

<!DOCTYPE html>
<html>

<head>
    
    <title></title>
    <style type="text/css">
        #bigbox {
            width: 500px;
            height: 500px;
            background: url(image/img5.jpg) no-repeat;
            margin: 10px auto;/* 横轴居中 */
            background-size: 100% 100%;  /*背景图充满盒子*/
            color: white;
        }
        #left {
            float: left;
            margin-left: 10px;
            margin-top: 5px;
        }

        #right {
            float: right;
            display: none;
            margin-right: 10px;
            margin-top: 5px;
        }

        .close {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="bigbox">
        <div>
            <span id="left">剩余 <span id="time">5</span> S</span>
            <span id="right" class="close">X关闭</span>
        </div>
    </div>

    <script type="text/javascript">
        var time = document.getElementById("time");
        var realtime = time.innerHTML;

        var close = document.querySelector('.close');
        var bigBox = document.getElementById("bigbox");

        //设置定时器 多次触发，所以用 setInterval
        var timer = setInterval(daojishi, 1000);

        function daojishi(){
            realtime--;
            time.innerHTML = realtime;
            if (realtime <= 0) {
                close.style.display = 'block';
               // clearTimeout(timer);   //虽然可以混用，但是不建议，会造成歧义
                clearInterval(timer);
                
            }

        }
        //关闭按钮事件
        close.onclick = function () {
            bigBox.style.display = 'none';
        }

    </script>
</body>

</html>

posted on 2021-06-10 08:34 雾恋过往阅读(226) 评论(0) 编辑收藏举报