Question

我的倒计时有问题我可以在本地存储中存储计时器，但如果我关闭页面，计时器不计数，如果我再次打开页面计时器再次开始计数。当我关闭页面并再次打开时，如何使计时器仍然计数。我正在使用keith-wood countdown

这是我的代码

$(function () {
    var temporary=3600;
    if (window.localStorage.getItem("detik")!=null)
    {
        temporary=window.localStorage.getItem("detik");
    }
    else {
        window.localStorage.setItem("detik",temporary);
    }
    $('#defaultCountdown').countdown(
         {
            until:+temporary,
            compact: true, 
            onExpiry: end,
            onTick:function(e)
            {
                var detik=(e[4]*3600)+(e[5]*60)+e[6];
                window.localStorage.setItem("detik",detik);
            }});
});

function end() { 
    alert('We have lift off!'); 
}

谢谢你和干杯!!

Answer 1

好吧，当您的网页关闭时，您不能指望自己的javascript继续倒计时。因此，您应该保存计时器将达到0的时间戳，而不是保存剩下的秒数。

var reachZeroOn;
if (window.localStorage.getItem("reachZeroOn") !== null) {
    reachZeroOn = new Date(window.localStorage.getItem("reachZeroOn"));
} else {
    reachZeroOn = new Date((new Date).getTime() + 3600000);
    window.localStorage.setItem("reachZeroOn", reachZeroOn);
}

$('#defaultCountdown').countdown({
    until: reachZeroOn,
    compact: true, 
    onExpiry: end,
});

function end() { 
    alert('We have lift off!'); 
}

工作示例：jsFiddle

Answer 2

实际上，如果您关闭浏览器或离开浏览器，页面的JavaScript就无法运行。

因此，如果您要存储localStorage中剩余的秒数，那么当您返回时该数字不会发生变化时，会给出您注意到的行为。

您应该存储计数器倒计时的绝对时间，而不是存储剩余的秒数。在倒计时期间，此值不会更改，因此如果您离开页面并返回该页面，则不会出现问题。您也不必在每个时刻更新localStorage。

以下是代码：

    // read previous deadline (unix time) or default to
    // current time + 1 hour:
    var deadline = +window.localStorage.getItem("detik")
                 || new Date().getTime() + 3600*1000;
    // save this time:
    window.localStorage.setItem("detik", deadline);

    if (deadline < new Date().getTime()) {
        // In case during the user's absence the timer already expired:
        end();
    } else {
        $('#defaultCountdown').countdown({
            until: new Date(deadline),
            compact: true,
            onExpiry: end,
        });
    }

请务必先删除您可能已有的localStorage条目。

如果页面关闭，JQuery倒计时计时器不计算

2 个答案: