等待頁面加載，然后顯示所有元素

Question

大家好我有一個使用JQuery在多個頁面上顯示的倒數計時器，我正在使用本地存儲：

var countdowntimervalue = 100;                            // Some variable
localStorage.setItem('timer_value', countdowntimervalue); // <-- Set the value

但是，當在頁面之間移動並從本地存儲中獲取值時-如果用戶在頁面之間足夠快地移動，計數器將不會遞減計數，-有一種方法可以等到計數器加載后才顯示頁面，這里是JS：

<script type="text/javascript">
            $(function() {
                var count = localStorage.getItem('count') || 60
                    countdown = setInterval(function() {
                        localStorage.setItem('count'), count);
                        $("span.countdown").html(minutes + ":" + seconds + " Remaining");

                        if (count == 0) {
                            clearInterval(countdown);
                            localStorage.removeItem('count');
                        }
                        count--;
                    }, 1000);
            });
            </script>

Answer 1

它開始只是一個注釋，但是這里是代碼...

$(function() {
    var startTime = localStorage.getItem("startTime");
    if (startTime == null) {
        startTime = new Date().getTime();
        localStorage.setItem("startTime", startTime);
    }
    var countdown = setInterval(function() {
        var elapsed = Math.floor((new Date().getTime() - startTime) / 1000);
        var remaining = 60 - elapsed;
        $("span.countdown").html(remaining + " seconds Remaining");
        if (remaining == 0) {
            clearInterval(countdown);
            localStorage.removeItem("startTime");
        }
    }, 1000);
});

存儲開始時間，然后計算從那時起經過的時間。 如果您想弄得一團糟，那么還可以計算頁面之間的時間，以便獲得60秒的“頁面顯示”時間，而不是包含頁面轉換的60秒。

無論哪種方式，都可以解決您的計時器不停機的直接問題。