JavaScript秒表-無法顯示前導數字

Question

我一直在嘗試使用JavaScript創建一個簡單的秒表腳本，以顯示經過的秒數，分鍾數和小時數。

理想情況下，我希望時間顯示如下：

hh:mm:ss

使用JavaScript，我無法找到一種格式化數字的內置方法，如果數字長度只有一位數字，那么它們將包含前導零。 這就是我的問題所在-我添加到腳本中以添加前導“ 0”的邏輯適用於seconds顯示，但不適用於minutes或hours顯示。

我編寫的代碼將為setInterval()函數的每次迭代添加一個“ 0”，而不是先添加一個前導“ 0”，然后再添加一個數字，然后創建一個長字符串“ 0”，然后再添加當前的minutes或hours值。

我很難理解為什么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> 

出於價值考慮，為了簡單起見，我在HTML文檔中保留了<script></script>標記，但是一旦它起作用，我很可能會將腳本移到自己的script.js文件中，並可能添加一些按鈕來啟動，停止和重置秒表。

Answer 1

當您執行“ 0” +分鍾（以及秒和小時）時，這些變量將自動轉換為由兩個字符，零和其他字符組成的字符串。

由於變量進行每次迭代，因此下次您要在字符串的開頭添加另一個“ 0”字符，如此等等。

之所以不會出現在秒上，是因為在執行秒++時，您將在循環開始時將秒BACK轉換為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，而實際的分鍾，秒和小時變量仍為整數。

Answer 2

 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> 

Answer 3

而不是在測試的if如果該值小於10，測試值的長度為字符串，如果是小於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>