JS利用定时器做一个简单的倒计时

主要用到的相关知识:定时器、Date()、。。

完整代码:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #meter {
            width: 220px;
            height: 50px;
            border: 2px dashed darkgreen;
            text-align: center;
            line-height: 50px;
            letter-spacing: 3px;
            font-size: 28px;
            margin: 80px auto;
        }
    </style>
</head>

<body>

    <div id="meter"></div>

    <script>
        var meter = document.getElementById("meter");

        (function () {
            // 获取距离目标时间的毫秒时间戳
            var tarTime = new Date("2020-04-24 19:03:01").getTime();

            function down() {
                // 获取当前时间的毫秒时间戳
                var curTime = Date.now();
                // 计算出当前时间距离目标时间的时间差
                var diffTime = tarTime - curTime;

                //判断倒计时是否完成,成立则清除定时器,关闭函数执行
                if (diffTime <= 0) {
                    clearInterval(downTime);
                    meter.innerText = "00:00:00";
                    return;
                }

                var hours = Math.floor(diffTime / (1000 * 60 * 60));
                var minutes = Math.floor((diffTime - hours * 60 * 60 * 1000) / (1000 * 60));
                var seconds = Math.floor((diffTime - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000);

                var timeDiff = zero(hours) + ":" + zero(minutes) + ":" + zero(seconds);
                meter.innerText = timeDiff;
                //console.log(seconds);
            }
            // 数字补零
            function zero(num) {
                return num < 10 ? "0" + num : num;
            }
            down();
            var downTime = setInterval(down, 1000);

        })();

    </script>
</body>

</html>

实现效果图
JS利用定时器做一个简单的倒计时_第1张图片
。。。。。。。。。。。。嗝~~

你可能感兴趣的:(JavaScript)