Question

我正在制作一个秒表，出于美观的原因，我希望输出显示：00：00：00：000。问题是，当我的秒表正在运行时，我很难将它带到前面，当值<＆lt; 10.

window.addEventListener('load', function() {

var display = document.getElementById('display-area');
var toggle = document.getElementById('toggle-button');
var reset = document.getElementById('reset-button');

var ms,
  difference,
  interval,
  hours,
  minutes,
  seconds,
  timer = 0;

function start() {
  difference = Date.now();
  interval = window.setInterval(update, 10);
  timer = 1;
};

function stopp() {
  window.clearInterval(interval);
  timer = 0;
};

function nullstill() {
ms = 0;
seconds = 0;
minutes = 0;
hours = 0;
display.value = '00:00:00:000';
};

function update() {
ms += elapsedTime();
if (ms >= 1000) {
  seconds += 1;
  ms = 0;
}
if (seconds >= 60) {
  minutes += 1;
  seconds = 0;
}
if (minutes >= 60) {
    hours += 1;
    minutes = 0;
}

display.value = hours + ':' + minutes +':' + seconds +':'+ ms;
};

function elapsedTime() {
var now = Date.now();
elapsed = now - difference;
difference = now;
return elapsed;
};

nullstill();

toggle.addEventListener('click', function() {
console.log(timer);
if (timer != 1) {
  start();
} else {
  stopp();
}
});

reset.addEventListener('click', function() {
nullstill();
});

});

如何让它发挥作用？

问候，

Answer 1

整数在数字前面永远不会为0。这是一个相当容易的修复。您只需要使用一些字符串连接。

display.value = (hours < 10 ? "0"+hours : hours) + ':' + (minutes < 10 ? "0"+minutes : minutes) +':' + (seconds < 10 ? "0"+seconds: seconds) +':'+ ms;

我使用的语法称为三元运算符。这里有一些关于它是如何工作的。基本上，它是一个简化的if语句，可以内联使用。

( condition ? {if true, run this } : {else, run this})

Answer 2

这是一个有用的小例子，向您展示了在Javascript中向数字添加前导零的便捷方法。如果您有一个类似53的数字，并且想要6个数字位置（例如，在56的情况下为4个前导零），您只需添加(1e6+53+'').slice(-6)，这将为您提供000053，因为1e6表示1有6个零在它之后，带有负数的切片从末尾开始并在这种情况下砍掉6个位置，因此100000053变为000053

＆＃13;

hours=0,minutes=1,seconds=20,ms=7;

document.getElementById('t').innerHTML= 
  (1e2+hours+'').slice(-2) + ':' + 
  (1e2+minutes+'').slice(-2) +':' + 
  (1e2+seconds+'').slice(-2) +':'+ 
  (1e3+ms+'').slice(-3);

＆＃13;

<div id='t'></div>

＆＃13;

注意处理ms时的1或2个前导零。您可以轻松调整前导零的数量。

Answer 3

当值小于10时，这需要字符串连接。我将为小时，分钟和秒创建三个单独的变量。这样代码就更干净，更易读。

var displayHours = (hours >= 10) ? hours : "0" + hours;
var displayMins = (minutes >= 10) ? minutes : "0" + minutes;
var displaySeconds = (seconds >= 10) ? seconds : "0" + seconds;

display.value = displayHours + displayMins + displaySeconds + ":" + ms;

在运行的秒表中显示时间格式

3 个答案: