重新加载网站时如何防止倒计时重置？

Question

我下载了一个网站模板，似乎一切正常。我唯一的问题是我的计时器总是在重新加载页面时再次启动。我能做些什么来防止它？我看到了一些关于在存储上节省时间的东西，但我的编码知识非常少。提前感谢您的帮助。

（我不想更改布局和 css 所以我只上传了 main.js 计时器部分和我的 html 文件中的特定位置。我的问题仍然存在代码太多，所以我需要添加更多细节。我只是在写一些额外的东西，请忽略）。

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 now = Date.now(`November 17 00:00:00`);
        const then = now + seconds * 1000;

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

            if (secondsLeft <= 0) {
                setInterval(countdown);
                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');

<div id="countdown" class="countdown">
                                <ul id="countdown-example">
                                    <li>
                                        <span class="days"></span>
                                        <p class="days_text">DAYS</p>
                                    </li>
                                    <li>
                                        <span class="hours"></span>
                                        <p class="hours_text">HOURS</p>
                                    </li>
                                    <li>
                                        <span class="minutes"></span>
                                        <p class="minutes_text">MINS</p>
                                    </li>
                                    <li>
                                        <span class="seconds"></span>
                                        <p class="seconds_text">SECS</p>
                                    </li>
                                </ul>
                            </div>

Answer 1

欢迎来到 Whosebug SXNSITVTY。

为了实现你想要的，你需要将你的当前值存储到localstorage。

然后，您可以在代码中使用存储的值。我认为，在查看您的代码时，实现应该在这里

        const now = Date.now(`November 17 00:00:00`);
        const then = now + seconds * 1000;

        countdown = setInterval(() => {
            let secondsLeft = Math.round((then - Date.now()) / 1000);
            const storedSecondsLeft = localStorage.getItem('secondsLeft');
            // check if you have localstorage stored
            // then override the value of secondsLeft with the localstorage
            if (storedSecondsLeft) {
               secondsLeft = +storedSecondsLeft
            }

            if (secondsLeft <= 0) {
                clearInterval(countdown);
                return;
            };

            // implement localstorage here
            localStorage.setItem('secondsLeft', secondsLeft)
            displayTimeLeft(secondsLeft);

        }, 1000);
    }

希望你理解这个想法

Answer 2

加载网页时，如评论中已指出的那样，从本地存储中检索倒数计时器，并将其作为您的起始值。确保检查是否实际设置了本地存储，并设置一个初始值，以防他们第一次访问的不是 IE。
确保您的 setInterval 函数在每次执行该函数时都会使用新计时器更新本地存储。您可以将其存储为时间戳。

Answer 3

所以经过几个小时的尝试，我成功地实现了它，实现是正确的，它需要的是在正确位置的 secondsLeft 之后的 (-1)。不知何故，经过一夜的尝试，我觉得我尝试了很多可能性。经过 7 个多小时，我真的开始理解代码了。大声笑我正在查看代码并且能够思考整个过程......所以计时器被保存在本地存储中的 secondsLeft 中，但是没有 (-1) secondsLeft 不会改变。当 (-1) 是 set.the return 时，函数会重新开始，但是从 (1) 已经被减去的点开始，依此类推。如果您落后于它，那就太简单了，但是很难以某种方式理解。很高兴我完成了那次旅程。

 const now = Date.now(`November 17 00:00:00`);
        const then = now + seconds * 1000;

        countdown = setInterval(() => {
            let secondsLeft = Math.round((then - Date.now()) / 1000);
            const storedSecondsLeft = localStorage.getItem('secondsLeft');
            // check if you have localstorage stored
            // then override the value of secondsLeft with the localstorage
            if (storedSecondsLeft) {
               secondsLeft = +storedSecondsLeft
            }

            if (secondsLeft <= 0) {
                clearInterval(countdown);
                return;
            };

            // implement localstorage here
            localStorage.setItem('secondsLeft', secondsLeft-1)// use -1 to update seconds Left 
            displayTimeLeft(secondsLeft);

        }, 1000);
    }

重新加载网站时如何防止倒计时重置？

How can i prevent Countdown from reseting when i reload website?

html

javascript

countdowntimer