毫秒级倒计时实现

187 阅读1分钟

你是不是需要一个毫秒级倒计时组件

如果你需要实现一个毫秒级的倒计时,方法已实现,可以直接 cv 一下

<html>
<head>
    <style>
        div {
            width: 100%;
            margin-top: 200px;
            color: red;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<div id="time"></div>
<body>
<script>
    function formatTime(time) {
        return time < 10 ? '0' + time : time;
    }

    function countTime(endTimestamp, id) {
        var timer = setInterval(function () {
            var now = new Date().getTime();
            var leftTime = endTimestamp - now; //时间差

            if (leftTime >= 0) {
                var d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                var h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
                var m = Math.floor((leftTime / 1000 / 60) % 60);
                var s = Math.floor((leftTime / 1000) % 60);
                var ms = Math.floor(leftTime % 1000);

                document.getElementById(id).innerHTML =
                    '倒计时:' + d + '天' + formatTime(h) + '时' + formatTime(m) + '分' + formatTime(s) + '秒' + formatTime(ms) + '毫秒';
            } else {
                document.getElementById(id).innerHTML = '倒计时结束了';
                clearInterval(timer);
            }
        }, 1000);
    }

    // 将结束时间转换为时间戳(示例)
    var endTimestamp = new Date('2024-01-25T10:32:00').getTime();

    // 调用方式,传入时间戳和倒计时内容所在的id名称
    countTime(endTimestamp, 'time');
</script>
</body>
</html>