如何避免网页刷新时倒计时器自动重置

你只需修改原有JS代码即可实现刷新不重置倒计时，不需要改动任何HTML和CSS代码，修改后的完整代码如下：

const countDownClock = (number = 100, format = 'seconds') => {

    const d = document;
    const daysElement = d.querySelector('.days');
    const hoursElement = d.querySelector('.hours');
    const minutesElement = d.querySelector('.minutes');
    const secondsElement = d.querySelector('.seconds');
    let countdown;
    convertFormat(format);


    function convertFormat(format) {
        switch (format) {
            case 'seconds':
                return timer(number);
            case 'minutes':
                return timer(number * 60);
            case 'hours':
                return timer(number * 60 * 60);
            case 'days':
                return timer(number  * 60 * 60 * 24);
        }
    }

    function timer(seconds) {
        // 先从本地存储读取之前存的结束时间
        const storedEndTime = localStorage.getItem('countdownEndTime');
        let then;
        if (storedEndTime) {
            // 有存储的结束时间就直接用
            then = Number(storedEndTime);
        } else {
            // 没有就新建结束时间并存到本地
            const now = Date.now();
            then = now + seconds * 1000;
            localStorage.setItem('countdownEndTime', then.toString());
        }

        countdown = setInterval(() => {
            const secondsLeft = Math.round((then - Date.now()) / 1000);

            if (secondsLeft <= 0) {
                // 修正原代码错误写法，倒计时结束清除定时器
                clearInterval(countdown);
                // 倒计时结束后清除存储的时间
                localStorage.removeItem('countdownEndTime');
                return;
            };

            displayTimeLeft(secondsLeft);

        }, 1000);
    }

    function displayTimeLeft(seconds) {
        daysElement.textContent = Math.floor(seconds / 86400);
        hoursElement.textContent = Math.floor((seconds % 86400) / 3600);
        minutesElement.textContent = Math.floor((seconds % 86400) % 3600 / 60);
        secondsElement.textContent = seconds % 60 < 10 ? `0${seconds % 60}` : seconds % 60;
    }
}


/*
    start countdown
    enter number and format
    days, hours, minutes or seconds
*/
countDownClock(15, 'days');

改动说明 #

• 新增了localStorage存储逻辑，首次打开页面时会自动把倒计时结束时间存在用户本地，刷新页面会直接读取已存储的结束时间计算剩余时长，不会重新开始计时
• 修正了原代码两处bug：一是Date.now()传参不生效的问题，二是倒计时结束后没有正确清除定时器的问题
• 倒计时结束后会自动清除本地存储的结束时间，下次打开页面会重新开始15天倒计时

补充说明 #

如果你需要的是固定到某个指定日期的倒计时（比如所有人打开都显示到11月17日的剩余时间），可以把timer函数里的存储逻辑替换成固定结束时间即可，不需要依赖本地存储：

function timer() {
    // 直接写死结束时间的时间戳即可，比如2024年11月17日0点
    const then = new Date('2024-11-17 00:00:00').getTime();
    // 剩下的定时器逻辑和之前保持一致即可
}

内容的提问来源于stack exchange，提问作者DepressedUnicorn