JavaScript编写的定时器

最新推荐文章于 2023-04-17 09:54:01 发布

嗜血天使翼

最新推荐文章于 2023-04-17 09:54:01 发布

阅读量297

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_43443392/article/details/83660708

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

从10s到0的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div >
    <p>
        <span id="sp1"> 10</span>秒
    </p>
</div>



</body>
</html>

<script>
    var sp1 =document.getElementById("sp1").innerHTML;
    var time = setInterval(function () {
        sp1 = sp1-1;
        document.getElementById("sp1").innerHTML =sp1;
        if (sp1 ===0){
            clearInterval(time);
            // alert("计时器停止！");
        }
    },1000)

</script>

可删除的动态小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 300px;
            height: 200px;
            background: url(1.gif) no-repeat center ;
            position: relative;
            margin: 30px auto;
        }
        p {
            color: white;
        }
        #sp2 {
            color: white;
            position: absolute;
            top: 3px;
            right: 3px;
            display: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <p>剩余<span id="sp1">5</span>秒</p>
    <span id="sp2">X关闭</span>
    <!--<input type="button" value="X关闭" id="btn">-->
</div>
<script>
    var box = document.getElementById("box");
    var sp1 = document.getElementById("sp1").innerHTML;
    var sp2 = document.getElementById("sp2");
    var timer = setInterval(function () {
        sp1 = sp1-1;
        document.getElementById("sp1").innerHTML = sp1;
        if (sp1 == 0){
            clearInterval(timer);
            sp2.style.display = "inline";
            sp2.onclick = function () {
                box.style.display = "none";
            }
        }
    },1000)
</script>
</body>
</html>