如何使用 00:00 时间格式修复我的 Javascript 秒表？（秒：毫秒）答案

【问题标题】：How can I fix my Javascript stopwatch with the 00:00 time format? (Seconds:Milliseconds)如何使用 00:00 时间格式修复我的 Javascript 秒表？（秒：毫秒）
【发布时间】：2019-07-14 19:04:06
【问题描述】：

有没有办法让它运行秒表？我不需要任何开始或停止按钮，它应该只在页面加载时运行秒表并且秒表需要继续运行。

我已经完成了所有其他工作，但我找不到使用 00:00 格式的秒表功能。有没有这样的命令？

“d.getSeconds()”不适合我。

new Date();
var testVar = window.setInterval(update, 10);

function update() {
  var d = new Date();
  document.getElementById("seconds").innerHTML = d.getSeconds();
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>

有什么方法可以让 innerHTML 成为一个“00:00”格式的常规秒表？

【问题讨论】：

标签： javascript function innerhtml stopwatch

【解决方案1】：

按照您的操作方式，秒表可以从任意随机数开始（因为它从当前秒数开始）。我建议在下面简单地制作你自己的。 但是，如果您不想自己制作，请查看第二个或第三个 sn-p。

var testVar = window.setInterval(update, 10);
var seconds = 0;
var milliseconds = 1;

function update() {
  if (milliseconds == 100) {
    milliseconds = 0;
    seconds++;
  }
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
  milliseconds++;
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds">00:00</p>

如果您想继续按照以前的方式进行操作，请查看下面的 sn-p。我从new Date() 得到了分秒数，并且基本上使用了一些你想要的 if 语句对其进行了格式化。

update();
var testVar = window.setInterval(update, 10);
var seconds;
var milliseconds;
var d;

function update() {
  d = new Date();
  seconds = d.getSeconds();
  milliseconds = Math.floor((d.getMilliseconds() / 10));
  
  if (milliseconds < 10 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":0" + milliseconds;
  }
  else if (milliseconds < 10 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":0" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds < 10) {
    document.getElementById("seconds").innerHTML = 
    "0" + seconds + ":" + milliseconds;
  }
  else if (milliseconds >= 0 && seconds >= 10) {
    document.getElementById("seconds").innerHTML = 
    seconds + ":" + milliseconds;
  }
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>
</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>

【讨论】：

有没有办法用“秒”。“毫秒”来做到这一点？我尝试使用您的代码，但它只给了我（示例）55.996。 55 会在几秒钟内上升，而毫秒只会改变“6”。 99 会留在那里。
@JohnDoee 我很确定有。我马上去处理
@JohnDoee 我将两个 sn-ps 都更新为 Seconds:Milliseconds
@JohnDoee 它对您不起作用的原因是因为 1. 它每秒更新一次，因此毫秒数不会改变。您需要更改window.setInterval()。 2. 毫秒给了你 3 位数，因为这就是毫秒。我必须除以 10 才能得到 2 位数
谢谢。我没有想到这一点。但看了你的代码后，觉得有道理。

【解决方案2】：

您可以使用padStart 以及一些数学方法来格式化秒表：

window.setInterval(update, 1000);
function update(){
    var d = new Date();
    var minutes = Math.floor(d.getSeconds() / 60)
    var seconds = d.getSeconds() % 60
    var time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    document.getElementById("seconds").innerHTML = time
}

<h1>Stop Watch</h1>
<p>Elapsed Time:</p>
<p id="seconds"></p>

【讨论】：

【解决方案3】：

这里有一些代码可以将其分解并正确格式化。

注意：我们有一个基本的“开始”日期要减去，这使我们可以像真正的秒表一样工作。

let base = Date.now(); // Milliseconds
var testVar = window.setInterval(update, 10);

const displayNum = (num) => num.toString().padStart(2,'0');

function update() {
  let mil = Date.now() - base;
  let sec = Math.floor( mil/1000 );
  mil = mil%1000;
  let min = Math.floor( sec/60 );
  sec = sec%60;
  document.getElementById("seconds").innerHTML = `${displayNum(min)}:${displayNum(sec)}:${displayNum(mil)}`;
}

#seconds {
  background-color: yellow;
  max-width: 17%;
}

<!DOCTYPE html>

<head>
  <title>
    Stop Watch
  </title>

</head>

<body>
  <h1>
    Stop Watch
  </h1>
  <p>Elapsed Time:</p>
  <p id="seconds"></p>


</body>

【讨论】：