从特定的动态值开始 javascript 秒表

Question

在提问之前我想通知你，我已经在相关主题的问题中进行了搜索，但我的问题与其他问题不同。实际上，我正在构建一个“Javascript 秒表”，但脚本中有一些问题我已经尝试并搜索过但无法找到 none。秒表有问题：

秒表会在页面重新加载时自动重新启动，即使计时器已被“stop_btn”停止。
页面重新加载时秒表会自动重新启动，比较开始时间和当前时间；暂停时间完全被忽略！
秒表能否从特定的动态值启动；像 PHP 变量这样的东西： $time = "01:06:39"; ？

Javascript:

var timer;
var startTime;
var isRunning = false;
var waitedTime = 0;
var stoppedTime = 0;

function start() {
  if (isRunning) return;
  isRunning = true;
  startTime = parseInt(localStorage.getItem('startTime') || Date.now());
  if (timer) {
    waitedTime += (Date.now() - stoppedTime);
  }
  localStorage.setItem('startTime', startTime);
  timer = setInterval(clockTick, 100);
}

function stop() {
  isRunning = false;
  clearInterval(timer);
  stoppedTime = Date.now();
}

function reset() {
  isRunning = false;
  stoppedTime = 0;
  waitedTime = 0;

  clearInterval(timer);
  timer = undefined;
  localStorage.removeItem('startTime');
  document.getElementById('display-area').innerHTML = "00:00:00.000";
}

function clockTick() {
  var currentTime = Date.now(),
    timeElapsed = new Date(currentTime - startTime - waitedTime),
    hours = timeElapsed.getUTCHours(),
    mins = timeElapsed.getUTCMinutes(),
    secs = timeElapsed.getUTCSeconds(),
    ms = timeElapsed.getUTCMilliseconds(),
    display = document.getElementById("display-area");

  display.innerHTML =
    (hours > 9 ? hours : "0" + hours) + ":" +
    (mins > 9 ? mins : "0" + mins) + ":" +
    (secs > 9 ? secs : "0" + secs) + "." +
    (ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms);
};

var stopBtn = document.getElementById('stop_btn');
var startBtn = document.getElementById('start_btn');
var resetBtn = document.getElementById('reset_btn');

stopBtn.addEventListener('click', function() {
  stop();
});
startBtn.addEventListener('click', function() {
  start();
});
resetBtn.addEventListener('click', function() {
  reset();
})
start();

有人可以帮忙吗？

Answer 1

您可以添加这个新变量，然后在启动函数中使用它。如果定义了自定义时间，则本地存储或当前日期将被忽略。

var customStartTime = new Date() // enter your custom date in the Date() function.

然后在start()函数中修改starttime

startTime = customStartTime || parseInt(localStorage.getItem('startTime') || Date.now());

Answer 2

您是否考虑过使用 window.onload 处理程序，您可以在页面重新加载后从中加载秒表值，我认为这应该涵盖您提到的前 2 个问题。此外，当您重新加载页面时，stoppedTime 变量将为 0，使用 localStorage 来缓存 stoppedTime。

从特定的动态值开始 javascript 秒表

Start javascript stopwatch from a specific dynamic value

javascript

stopwatch

dynamic