Javascript：如何从给定的 HH:MM:SS 启动秒表？ 更新

编程问答 2022-05-27

问题描述

更新

现在设法从 01:02:03 开始​​。 
startTime = new Date().getTime()-(seconds);

但是当我恢复秒表时，它不会从暂停的地方继续。 例如， 我在 00:07:45 暂停。我想恢复它，但我收到了 00:15:30。

你好吗？希望你们今天或晚上都过得愉快。

所以我这里有一个小问题。我有一个秒表。我希望秒表从显示的特定时间开始运行。

例如， 现在秒表上显示的时间是 01:02:03。我希望秒表从 01:02:03 开始​​。

我对此进行了研究。它与 Epoch Javascript 有关。我将 01:02:03 转换为毫秒。但它不是从 01:02:03 开始​​的。相反，它从 22:52:34 开始。

我不确定我哪里做错了。请赐教。

脚本

/*Global variables here*/

var startTime;
var updatedTime;
var difference;
var tInterval;
var savedTime;
var paused = 0;
var running = 0;

/**This function is triggered when user starts the stopwatch.**/

function startTimer(){
  if(!running){
    // getting the displayed time 
    startTime = document.querySelector('#stopwatch_display').innerText;
    var a = startTime.split(':');
    var seconds = (a[0]*1000*60*60)+(a[1]*1000*60)+(a[2]*1000);
    startTime = new Date(seconds+1);
    tInterval = setInterval(getShowTime,1);
    // change 1 to 1000 above to run script every second instead of every millisecond. one other change will be needed in the getShowTime() function below for this to work. see comment there.   
 
    paused = 0;
    running = 1;
    // Some styling here
  }
}

/**This function is triggered when user pauses and resumes the stopwatch.**/

function pauseTimer(){
  if (!difference){
    // if timer never started,don't allow pause button to do anything
  } else if (!paused) {
    clearInterval(tInterval);
    savedTime = difference;
    paused = 1;
    running = 0;
    // Some styling here  
 } else {
   // if the timer was already paused,when they click pause again,start the timer again
   startTimer();
  }
}

/**This function is triggered when user resets the stopwatch.**/

function resetTimer(){
  clearInterval(tInterval);
  savedTime = 0;
  difference = 0;
  paused = 0;
  running = 0;
  // Some styling here
}

/**This function is to display the time.**/

function getShowTime(){
  updatedTime = new Date().getTime();
  if (savedTime){
    difference = (updatedTime - startTime) + savedTime;
  } else {
    difference =  updatedTime - startTime;
  }
  var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((difference % (1000 * 60)) / 1000);
  //var milliseconds = Math.floor((difference % (1000 * 60)) / 100);

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  //milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? "00" + milliseconds : "0" + milliseconds : milliseconds;
  timerdisplay.innerHTML = hours + ':' + minutes + ':' + seconds;
}

解决方法

getShowTime 应该只计算当前时间。暂停后，脚本应依靠 startTimer 继续计时。以下是更改后的代码：

function startTimer(){
  if(!running){ // Check if the timer is running
    if (savedTime) { // Are we continuing after pausing?
      startTime = (+ new Date()) - savedTime; // If yes,then start from the savedTime
    } else {
      // If no,get the startTime from the element
      startTime = timerDisplay.innerText;
      var a = startTime.split(':');
      var seconds = (a[0]*1000*60*60)+(a[1]*1000*60)+(a[2]*1000);
      startTime = (+ new Date()) - seconds;
    }
    tInterval = setInterval(getShowTime,1); // Start the interval
 
    running = true; // Tell the script that the stopwatch is running
  }
}

function getShowTime(){
  updatedTime = + new Date(); // Get current time. Use '+ new Date()' instead because it is much shorter.
  difference =  updatedTime - startTime; // Get the amount of seconds

  // Calculate the different parts
  var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((difference % (1000 * 60)) / 1000);
  //var milliseconds = Math.floor((difference % (1000 * 60)) / 100);

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  //milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? "00" + milliseconds : "0" + milliseconds : milliseconds;

  // Update on page
  timerDisplay.innerText = hours + ':' + minutes + ':' + seconds;
}

See a working example.

在控制台中输入命令。

问题

您有几个问题：

严重问题：

  • 如果 timerDisplay 元素为空或格式不正确，脚本应自动从 0 开始而不是中断。 (NaN:NaN:NaN) 此问题尚未修复。
  • 脚本依赖于获取当前时间，所以总是从当前时间开始计算。您在脚本中遇到的问题是，在 startTimer 中，您执行了 new Date(seconds+1)，这破坏了脚本，因为在 getShowTime 中，它从时间戳中减去 Date()。这已得到修复。
  • 秒表暂停后继续秒表的处理应该在startTimer，而不是getShowTime。已修复。

问题没那么严重

  • 您现在应该使用 + new Date() 而不是 new Date().getTime()，因为它更短。见this question。固定。
  • 秒表的状态只有一个变量。在 running 和 paused 之间选择。你不能同时拥有，因为它使脚本有点混乱。我相信您应该使用 running 而不是 paused，只需使用 !running。未修复。
  • 代替0 和1 的running，您应该使用true 和false 使脚本更具可读性。固定。

请尝试自己修复这些问题。

epochjavascript