js倒计时实现（包括补零）

最新推荐文章于 2023-11-04 14:35:06 发布

哎呦灬不错呦。

最新推荐文章于 2023-11-04 14:35:06 发布

阅读量300

点赞数

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

本文链接：https://blog.csdn.net/weixin_52583582/article/details/128780138

版权

html5 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

JavaScript

11 篇文章 1 订阅

订阅专栏

在这里插入图片描述
代码如下：

<!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>
</head>

<body>
    <div id="showtime"></div>
</body>
<script>
    var num = 0;
    function zero(num) { //补0操作
        if (num < 10) {
            return '0' + num
        }
        return num
    }
    console.log(zero(0))

    var showtime = function () {
        var nowtime = new Date(),  //获取当前时间
            endtime = new Date("2024/02/09");  //定义结束时间

        var endTimeDay = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
            day = Math.floor(endTimeDay / (1000 * 60 * 60 * 24)),  //计算天数
            th = Math.floor(endTimeDay / (1000 * 60 * 60) % 24),  //计算小时数
            tm = Math.floor(endTimeDay / (1000 * 60) % 60),  //计算分钟数
            ts = Math.floor(endTimeDay / 1000 % 60);  //计算秒数
        return `${zero(day)}天${zero(th)}:${zero(tm)}:${zero(ts)}`;  //返回倒计时的字符串
    }

    var showTime = document.getElementById("showtime");
    setInterval(function () {
        showTime.innerHTML = showtime();
    }, 1000);  //反复执行函数本身
</script>

</html>