简单的倒计时

最新推荐文章于 2023-01-03 17:02:30 发布

@小白鼠

最新推荐文章于 2023-01-03 17:02:30 发布

阅读量108

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45726786/article/details/119854563

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<html>
<meta charset="UTF-8">
<head>
<style>
        #box {
            width: 500px;
            height: 150px;
            margin: 50px auto;
            font-size: 30px;
        }
    </style>   
</head>
<body>
    <div id="box">倒计时5秒钟</div>
    <script>
        var timeDiv = document.getElementById('box');
        // 倒计时的事件
        var timeNum = 5;
        var t = setInterval(function(){
            timeNum--;
            timeDiv.textContent = "倒计时还有" +timeNum+"秒";
            if (timeNum == 0) {
                timeDiv.textContent = "时间到！！！";
                /*
                    想要的效果达到之后，定时器是需要移除的否则会占用内存，
                    该方法是移除重复定时器的方法，需要传入定时器的对象，
                    移除只是把当前重复定时器的重复代码给移除了，对象还在。
                     clearInterval(t);
                */
                clearInterval(t);
                t = null;
            }
        },1000)
       
    </script>
</body>

</html>