从特定的动态值启动JavaScript秒表

如何解决从特定的动态值启动JavaScript秒表

在提出问题之前，我想通知您，我已经搜索过相关主题的问题，但是我的问题与其他问题有所不同。实际上，我正在构建“ Java计时器”，但是我尝试并搜索了一些脚本中的问题以解决这些问题，但找不到这些问题。秒表中有问题：

1. 即使计时器已被“ stop_btn”停止，秒表在页面重新加载时也会自动重新启动。

2. 秒表会自动重新启动，时间会比较页​​面重新加载时的开始时间和当前时间；暂停的时间被完全忽略了！

3. 可以从特定的动态值启动秒表；像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();

任何人都可以帮忙吗？

解决方法

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

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

然后在start（）函数中修改开始时间

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

,

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