Javascript 倒计时在页面刷新时持续存在

标签 javascript jquery local-storage countdowntimer persistent

我正在尝试进行倒计时,刷新此页面后不会重新启动。我正在使用基思·伍德倒计时。我想数到 5 分钟。

var countdownTarget = localStorage.getItem('countdownTarget');
    if (countdownTarget === null) 
    {
        var countdownTarget = new Date();
        countdownTarget = new Date(countdownTarget.getFullYear(), countdownTarget.getMonth(), countdownTarget.getDate(), countdownTarget.getHours(), countdownTarget.getMinutes() + 5, countdownTarget.getSeconds());
        localStorage.setItem('countdownTarget', countdownTarget);
    }

    $('#defaultCountdown').countdown({ until : countdownTarget, format: 'MS', compact: true});

我将当前日期 + 5 分钟保存到浏览器本地存储作为 countdownTarget(仅当之前未完成时)。如果用户刷新页面,时间应该是持久的。但有问题。当我第一次加载页面时,时间从 5 分钟开始计算(这应该是正常的),但是当我尝试再次刷新它时,它从 36 分钟开始计算,我不知道为什么,我也不知道这 36 分钟从何而来。

最佳答案

与其重新声明日期,为什么不直接增加分钟数呢?你的代码对我有用。另外,您应该只启动 countdownTarget 一次。

var countdownTarget = localStorage.getItem('countdownTarget');
if (countdownTarget === null) {
    countdownTarget = new Date();
    countdownTarget.setMinutes(countdownTarget.getMinutes() + 5);
    localStorage.setItem('countdownTarget', countdownTarget);
} else {
    countdownTarget = new Date(countdownTarget);
}
$('#defaultCountdown').countdown({ until : countdownTarget, format: 'MS', compact: true});

关于Javascript 倒计时在页面刷新时持续存在,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41511916/

相关文章:

javascript - 单击按钮时显示多个 div

html - 如何在 javafx WebView 中启用 HTML5 本地存储

javascript - 为什么我不能在 IE8 (javascript) 上扩展 localStorage?

javascript - 使用 localstorage 从 onclick 函数保存和检索用户布局首选项

javascript - 获取放置的div JQUERY的坐标

javascript - 使用 jquery addClass 到多个不同的元素

javascript - div值改变时执行javascript函数

javascript - 元素在移动设备上的位置与桌面上的不同

Javascript:使用元组作为字典键

javascript - jQuery 获取高度和宽度