Question

所以，让我们说我有两页：＆＃34; index.html＆＃34;和＆＃34; info.html＆＃34;。在页面index.html中，我有一个按钮和一个跨度。当按下按钮时，倒数计时器在该范围内启动 - 当计时器变为零时，会发生一些事情。问题是，如果我开始倒计时，那么我去查看info.html页面，当我返回index.html时，计时器重置。当然这是由于在离开index.html时卸载脚本引起的...但是如何解决这个问题呢？如果我在倒计时剩下50秒钟，我离开index.html，那么我在页面info.html中停留30秒，当我回来时我应该还剩20秒。有什么想法吗？

Answer 1

只需将计时器信息保存在本地存储或会话存储中（请参阅：Web Storage）。

例如，在页面加载时：

var countdownEndsAt = localStorage.getItem("countdownEndsAt");
if (countdownEndsAt) {
    countdownEndsAt = +countdownEndsAt;
    if (countdownEndsAt < Date.now() {
        // It's already happened, decide what to do
    }
}
if (!countdownEndsAt) { // Separate 'if' in case you decide to clear it in the "it's already happened" above
    countdownEndsAt = Date.now() + 60000;
    localStorage.setItem("countdownEndsAt", countdownEndsAt); // Gets converted to a string
}

countdownEndsAt现在包含计时器应该关闭的时间值。

Answer 2

您可以节省本地存储空间的剩余时间。刷新页面时，脚本将从本地存储加载值并使用新值启动计时器：

function nonStopTimer(cb, seconds) {
  var KEY = 'nonStopTimer'
  var secsRemaining = localStorage[KEY];

  if (!secsRemaining) {
    secsRemaining = seconds;
  }

  setTimeout(function() {
    localStorage[KEY] = null;
    cb();
  }, secsRemaining * 1000);

  setInterval(function() {
    secsRemaining -= 1;
    localStorage[KEY] = secsRemaining;
  }, 1000);
}

在HTML

2 个答案: