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秒。

无论哪种方式，这将解决您的计时器不会停机的直接问题。

在显示所有元素之前等待页面加载

1 个答案: