js24小时循环倒计时

基础概念

24小时循环倒计时是一种常见的功能，用于显示从当前时间开始的剩余时间，并在时间到达后重新开始计时。这种功能通常用于促销活动、限时任务等场景。

类型

简单倒计时：从固定时间开始倒计时。
循环倒计时：在到达设定时间后重新开始倒计时。

应用场景

电商平台的限时抢购
网站的倒计时活动
游戏中的限时任务

实现方法

以下是一个使用JavaScript实现24小时循环倒计时的示例代码：

function startCountdown() {
    const duration = 24 * 60 * 60 * 1000; // 24小时的毫秒数
    let endTime = Date.now() + duration;

    function updateCountdown() {
        const now = Date.now();
        const remainingTime = endTime - now;

        if (remainingTime <= 0) {
            endTime = now + duration; // 重新开始倒计时
        }

        const hours = Math.floor(remainingTime / (1000 * 60 * 60));
        const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

        document.getElementById('countdown').textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        setTimeout(updateCountdown, 1000); // 每秒更新一次
    }

    updateCountdown();
}

// 启动倒计时
startCountdown();

HTML部分

<div id="countdown">00:00:00</div>

可能遇到的问题及解决方法

时间不准确：
- 原因：JavaScript的setTimeout和setInterval可能会因为浏览器的性能问题导致时间不准确。
- 解决方法：使用Date.now()获取当前时间，并在每次更新时重新计算剩余时间。

页面刷新后倒计时重置：
- 原因：页面刷新会导致JavaScript重新执行，从而重置倒计时。
- 解决方法：可以使用本地存储（如localStorage）来保存倒计时的结束时间，并在页面加载时读取该时间。

function startCountdown() {
    let endTime = localStorage.getItem('endTime');
    if (!endTime) {
        endTime = Date.now() + 24 * 60 * 60 * 1000;
        localStorage.setItem('endTime', endTime);
    }

    function updateCountdown() {
        const now = Date.now();
        const remainingTime = endTime - now;

        if (remainingTime <= 0) {
            endTime = now + 24 * 60 * 60 * 1000;
            localStorage.setItem('endTime', endTime);
        }

        const hours = Math.floor(remainingTime / (1000 * 60 * 60));
        const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

        document.getElementById('countdown').textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        setTimeout(updateCountdown, 1000);
    }

    updateCountdown();
}

startCountdown();

通过这种方式，即使页面刷新，倒计时也能继续进行。