JavaScript 秒表 - 无法显示前导数字

Question

我一直在尝试使用 JavaScript 创建一个简单的秒表脚本，以显示已经过去的秒数、分钟数和小时数。

理想情况下，我希望时间显示如下：

hh:mm:ss

使用 JavaScript，我无法找到一种内置的方法来格式化数字，以便在数字长度只有一位时它们包含前导零。这就是我的问题所在 - 我添加到脚本中以添加前导“0”的逻辑适用于 seconds 显示，但不适用于 minutes 或 hours 显示。

我编写的代码不是只添加一个前导“0”然后是一个数字值，而是为 每个迭代 添加一个“0”setInterval() 函数，创建一长串“0”，然后是当前 minutes 或 hours 值。

我无法理解为什么 minutes 和 hours 部分会发生这种情况，但不会 seconds 部分当使用的代码相同时。

理论上，我知道我基本上只是在字符串中添加另一个“0”，然后每次 setInterval() 函数执行时都会显示该字符串，但我似乎无法弄清楚为什么不会发生在 seconds 部分。同样有趣的是，前导“0”在计时器达到两秒后才开始添加。

请参阅下面我为此秒表脚本编写的代码。我当然会很感激任何人可以提供的任何见解，以使它按预期工作。

let seconds = 0;
let minutes = 0;
let hours = 0;

function stopWatch(){

//Increment seconds on each "tick" of the stopwatch
seconds++;

//Check if minutes or hours needs to be incremented (which should happen every 60 seconds or 60 minutes, resepctively)
if(seconds / 60 == 0){
 seconds = 0;
 minutes++;

 if(minutes / 60 == 0){
  minutes = 0;
  hours++;
 }

}

//If the number of elapsed seconds, minutes, or hours is less than 10, add a 0 to the front of the number.
if(seconds < 10){
 seconds = "0" + seconds;
}

if(minutes < 10){
 minutes = "0" + minutes;
}

if(hours < 10){
 hours = "0" + hours;
}

//Print the results to the "display" div in the HTML
document.getElementById("display").innerHTML = hours + ":" + minutes + ":" + seconds;

}

//Run the stopWatch() function every 1000ms
window.setInterval(stopWatch, 1000);

 <div id="display">00:00:00</div>

为了简单起见，我将 <script></script> 标记保留在 HTML 文档中，但是一旦我开始使用它，我可能会将脚本移动到它自己的 script.js 文件并可能添加一些按钮来启动、停止和重置秒表。

Answer 1

当您执行“0”+ 分钟（以及秒和小时）时，这些变量会自动转换为一个字符串，由两个字符、一个零和其他字符组成。

由于每次迭代都会携带变量，下次您将在字符串的开头添加另一个“0”字符，依此类推。

它没有发生在秒数上的原因是因为当你执行秒数++时，你在循环开始时将秒数 BACK 转换为 int。所以它变成了一个字符串，然后是一个int，然后是一个字符串，等等

要查看实际效果，请尝试以下代码段：

var test = 1;
console.log( typeof test );  //outputs "number"
test = "0" + test;
console.log( typeof test ); //outputs "string"
test++;
console.log( typeof test); //outputs number

我的建议是将计数单位与显示单位分开。查看分钟是否小于 10，如果是，则将 outputMinutes 设置为“0”+ 分钟。在几秒钟和几小时内做同样的事情。然后每次只更改 outputMinutes、outputSeconds 和 outputHours，而实际的分钟、秒和小时变量保持为整数。

Answer 2

let seconds = 0;
let minutes = 0;
let hours = 0;
let seconds_string = "0";
let minutes_string = "0";
let hours_string = "0";

function stopWatch(){

//Increment seconds on each "tick" of the stopwatch
seconds++;

//Check if minutes or hours needs to be incremented (which should happen every 60 seconds or 60 minutes, resepctively)
if(seconds / 60 === 1){
 seconds = 0;
 minutes++;

 if(minutes / 60 === 1){
  minutes = 0;
  hours++;
 }

}

//If the number of elapsed seconds, minutes, or hours is less than 10, add a 0 to the front of the number.
if(seconds < 10){
 seconds_string = "0" + seconds.toString();
} else {
    seconds_string = seconds.toString();
}

if(minutes < 10){
 minutes_string = "0" + minutes.toString();
} else {
    minutes_string = minutes.toString();
}

if(hours < 10){
 hours_string = "0" + hours.toString();
} else {
    hours_string = hours.toString();
}

//Print the results to the "display" div in the HTML
document.getElementById("display").innerHTML = hours_string + ":" + minutes_string + ":" + seconds_string;

}

//Run the stopWatch() function every 1000ms
window.setInterval(stopWatch, 1000);

 <div id="display">00:00:00</div>

Answer 3

不是在 if 中测试值是否小于 10，而是测试该值的长度作为字符串，如果它小于 2（这意味着在这种情况下任何小于 10 的数字)，然后将另一个 "0" 作为字符串添加到该值；

如下所示：

let seconds = 0;
let minutes = 0;
let hours = 0;

function stopWatch(){
  seconds++;
  
  if(seconds / 60 == 0){
    seconds = 0;
    minutes++;
    if(minutes / 60 == 0){
      minutes = 0;
      hours++;
    }
  }

  if(seconds.toString().length < 2){
    seconds = "0" + seconds;
  }
  
  if(minutes.toString().length < 2){
    minutes = "0" + minutes;
  }

  if(hours.toString().length < 2){
    hours = "0" + hours;
  }
  document.getElementById("display").innerHTML = hours + ":" + minutes + ":" + seconds;
}

window.setInterval(stopWatch, 1000);

<div id="display">00:00:00</div>

JavaScript 秒表 - 无法显示前导数字

JavaScript Stopwatch - Trouble Displaying a Leading Digit

javascript

timer

stopwatch

digits

intervals