Question

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

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

hh:mm:ss

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

我编写的代码不仅会在前面加上一个“ 0”，然后再加上一位数字，而不会为setInterval()函数的每次迭代添加“ 0”，创建一个长字符串“ 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

如果值小于10，请代替在if中进行测试，如果字符串的值小于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秒表-无法显示前导数字

3 个答案: