JavaScript秒表-显示前导数字时出现问题
我一直在尝试使用JavaScript创建一个简单的秒表脚本，以便显示经过的秒数、分钟数和小时数。
理想情况下，我希望时间显示如下：
hh:mm:ss
使用JavaScript时，我找不到一种内置的方法来格式化数字，这样如果一个数字的长度只有一位数，它们就会包含一个前导零。这就是我的问题所在-我添加到脚本中以添加前导"0“的逻辑适用于seconds显示，但不适用于minutes或hours显示。
我编写的代码将为setInterval()函数的每次迭代添加一个"0“，创建一个由"0”组成的长字符串，然后是当前的minutes或hours值，而不是只添加前导的“0”，然后添加一位数。
我很难理解为什么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文件中，并可能添加一些按钮来启动、停止和重置秒表。
回答 3
Stack Overflow用户
发布于 2018-08-30 04:57:55
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>
Stack Overflow用户
发布于 2018-08-30 04:55:00
当您执行"0“+分钟(以及秒和小时)时，这些变量会自动转换为一个字符串，该字符串由两个字符、一个零和其他字符组成。
因为变量在每次迭代中都会执行，所以下次在字符串的开头添加另一个"0“字符时，依此类推。
之所以不会发生在秒上，是因为在执行seconds++时，您会在循环开始时将秒转换回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，而实际的分钟、秒和小时变量仍然是整数。
Stack Overflow用户
发布于 2018-08-30 05:01:28
如果值小于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>
https://stackoverflow.com/questions/52085830
复制相似问题
腾讯云开发者
