从特定的动态值启动 javascript 秒表答案

【问题标题】：Start javascript stopwatch from a specific dynamic value从特定的动态值启动 javascript 秒表
【发布时间】：2023-03-08 09:56:02
【问题描述】：

在问这个问题之前，我想告诉你，我已经在相关主题的问题中搜索过，但我的问题与其他问题不同。实际上，我正在构建一个“Javascript 秒表”，但脚本中存在一些我尝试并搜索解决但找不到的问题。秒表有问题：

即使计时器被“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();

有人可以帮忙吗？

【问题讨论】：

标签： javascript dynamic stopwatch

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

是的，这有点道理！谢谢。