javascript - 如何保持每次倒计时都不开始？

Question

$(function() {
    var count = 20;
    countdown = setInterval(function() {
        $("p.countdown").html(count + "seconds remailing!");

        if (count == 0) {
            window.location = 'http://stackoverflow.com/';
        }

        count--;
    }, 1000);
});​

<p class="countdown">

每次我刷新浏览器时，倒计时从 20 开始。我想在刷新浏览器时。计数不是每次都从 20 开始。它从实际开始的时间开始，如何对代码进行一些更改？

Answer 1

可能最好的方法是将当前时间存储在 cookie（或其他一些本地存储）中，并在页面加载时检查它。如果存在，请使用它。如果不是，请从 20 开始。

为了避免管理跨浏览器存储的复杂性，您可以使用amplify.store. 只需在间隔的每次迭代中更新值。

设置值非常简单：

amplify.store( 'countdown', count );

就像以后得到它们一样：

amplify.store( 'countdown' );

您的代码将如下所示：

$(function() {
    // Pick up where we left off, or start from 20
    var count = amplify.store('count') || 20;
    countdown = setInterval(function() {
        $("p.countdown").html(count + " seconds remailing!");
        if (count <= 0) {
            // Clear our stored value
            amplify.store('count', null);
            window.location = 'http://stackoverflow.com/';
        }
        // Update stored value
        amplify.store('count', count--);
    }, 1000);
});​

演示： http: //jsfiddle.net/yWTR7/（几秒钟后点击“运行”）

Answer 2

首先在 php 会话变量或数据库中保存时间（最大时间），然后每 1 秒或您喜欢的任何间隔触发 ajax 查询，这会降低 php 变量的值。加载新页面时，在 javascript 中加载 php 变量值...

替代方案 您可以使用 cookie 来存储计时器值。

Answer 3

这是一个带有本地存储的：

$(function() {
    var count = localStorage.getItem('count') || 20,
        countdown = setInterval(function() {
            localStorage.setItem('count', count);
            $("p.countdown").html(count + " seconds remaining!");

            if (count === 0) {
                clearInterval(countdown);
                localStorage.removeItem('count');
                window.location = 'http://stackoverflow.com/';
            }

            count--;
        }, 1000);
});

​​小提琴