Question

我有一个递增计时器脚本：

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

刷新页面后，我需要继续计数。

Answer 1

首先，我必须指出，1000ms的setInterval很少会执行真正的1000ms延迟，这在使用计时器时并不可靠。

参考：https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9

我的建议（这也使计时器的保存更容易）是 -将计时器的开始日期保存在本地存储的UTC中 -通过当前时间的增量计算经过时间-本地存储时间 -以小时，分钟和秒表示增量。

启动计时器时，请从localStorage读取启动计时器，然后确定要显示的内容。

Answer 2

您可以将当前计数存储在localStorage中。

var totalSeconds = localStorage.getItem("totalSeconds") || 0;

function setTime() {
  // Your code ...
  localStorage.setItem("totalSeconds", totalSeconds);
}

编辑：Mosè的答案是一种更好，更可靠的替代方法。

Answer 3

可能的方法是使用localStorage。

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = window.localStorage.getItem('totalSeconds') || 0;
setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  window.localStorage.setItem('totalSeconds', totalSeconds);
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

Answer 4

您可以使用的最低要求：

let timer = parseInt(localStorage.getItem('timer'), 10) || 0
// get what's in the localstorage or start from 0
 const time = document.getElementById('time')
 const setTime = () => {
    timer += 1
    localStorage.setItem('timer', timer)
    time.innerHTML = `time lapsed: ${timer}`
 }

setInterval(setTime, 1000)

在刷新页面后，我需要使用JavaScript来使计时器继续运行

4 个答案: