如何以00:00時間格式修復我的Javascript秒表？（秒：毫秒）

Question

有沒有辦法讓它運行秒表？ 我不需要任何啟動或停止按鈕，它應該只是在頁面加載時運行秒表並且秒表需要繼續運行。

我已經完成了其他所有工作，但是找不到使用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”格式的常規秒表？

Answer 1

您可以使用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>

Answer 2

你正在這樣做，秒表可以從任何隨機數開始（因為它從當前秒開始）。 我建議你自己做下面的事。 但是，如果您不想自己制作，請查看第二個或第三個片段。

 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>

如果您想繼續按照自己的方式進行操作，請查看下面的代碼段。 我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>

Answer 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>

如何以00:00時間格式修復我的Javascript秒表？（秒：毫秒）

問題描述

3 個解決方案

解決方案1
1 2019-02-21 00:44:37

解決方案2
1 已采納 2019-02-21 00:46:08

解決方案3
1 2019-02-21 00:48:06

如何以00:00時間格式修復我的Javascript秒表？ （秒：毫秒）

問題描述

3 個解決方案

解決方案1 1 2019-02-21 00:44:37

解決方案2 1 已采納 2019-02-21 00:46:08

解決方案3 1 2019-02-21 00:48:06

如何以00:00時間格式修復我的Javascript秒表？（秒：毫秒）

解決方案1
1 2019-02-21 00:44:37

解決方案2
1 已采納 2019-02-21 00:46:08

解決方案3
1 2019-02-21 00:48:06