首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript秒表-显示前导数字时出现问题

JavaScript秒表-显示前导数字时出现问题
EN

Stack Overflow用户
提问于 2018-08-30 04:46:22
回答 3查看 62关注 0票数 0

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

理想情况下,我希望时间显示如下:

hh:mm:ss

使用JavaScript时,我找不到一种内置的方法来格式化数字,这样如果一个数字的长度只有一位数,它们就会包含一个前导零。这就是我的问题所在-我添加到脚本中以添加前导"0“的逻辑适用于seconds显示,但不适用于minuteshours显示。

我编写的代码将为setInterval()函数的每次迭代添加一个"0“,创建一个由"0”组成的长字符串,然后是当前的minuteshours值,而不是只添加前导的“0”,然后添加一位数。

我很难理解为什么minuteshours部分会发生这种情况,但是不是seconds部分的,因为使用的代码是相同的。

从理论上讲,我知道我基本上只是将另一个"0“添加到一个字符串中,然后在每次执行setInterval()函数时显示该字符串,但是我似乎不明白为什么在seconds部分没有出现这种情况。同样有趣的是,在计时器到达两秒之前,前导的“0”不会开始添加。

请看下面我为这个秒表脚本写的代码。我当然非常感谢任何人能提供的任何洞察力,让它按预期工作。

代码语言:javascript
复制
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);
代码语言:javascript
复制
	<div id="display">00:00:00</div>

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-30 04:57:55

代码语言:javascript
复制
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);
代码语言:javascript
复制
	<div id="display">00:00:00</div>

票数 2
EN

Stack Overflow用户

发布于 2018-08-30 04:55:00

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

因为变量在每次迭代中都会执行,所以下次在字符串的开头添加另一个"0“字符时,依此类推。

之所以不会发生在秒上,是因为在执行seconds++时,您会在循环开始时将秒转换回int。所以它变成了一个字符串,然后是一个int,然后是一个字符串,等等。

要查看实际效果,请尝试以下代码片段:

代码语言:javascript
复制
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,而实际的分钟、秒和小时变量仍然是整数。

票数 2
EN

Stack Overflow用户

发布于 2018-08-30 05:01:28

如果值小于10,不要在if中测试,而是以字符串的形式测试该值的长度,如果它小于2(在本例中表示任何小于10的数字),则将另一个"0"作为字符串添加到该值中;

如下所示:

代码语言:javascript
复制
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);
代码语言:javascript
复制
<div id="display">00:00:00</div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52085830

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档