JavaScript 定时器制作一个弹窗小广告

最新推荐文章于 2023-03-01 15:19:56 发布

万花果子

最新推荐文章于 2023-03-01 15:19:56 发布

阅读量852

点赞数 2

分类专栏： JavaScript 文章标签： javascript 弹窗小广告定时器

本文链接：https://blog.csdn.net/sinat_27790827/article/details/51306252

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            bottom: 0;
            right: 0;
            display: none;
        }
        #close{
            position: absolute;
            left: -20px;
        }
    </style>
</head>
<body>
    <div id="dis">
        <span id="close" onclick="btn();">X</span>
        过<span id="second">5</span>秒后关闭
    </div>
</body>
<script>
    var s = document.getElementById("dis")
    var second = document.getElementById("second");
    var timer = null;
    var timeOut = setTimeout(function(){
        s.style.display = "block";
            timer = setInterval(function(){
            second.innerText--;
            if(second.innerText == 0){
                clearInterval(timer)
                s.style.display = "none";
            }
        },1000)
    },1000)
    function btn(){
        s.style.display = "none";
        clearInterval(timer);
    }
</script>

这里写图片描述

万花果子

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 定时器制作一个弹窗小广告

<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; positi
复制链接

扫一扫

专栏目录