[英]When a number less than 10 is in the chronometer, the 0 at the start of the number is repeated
我正在做一個計時器，我希望當計時器中出現的數字小於10而不是1、2、3 ...時，會出現在計時器01、02、03中。
function startchrono() { var start = document.getElementById('start'), reset = document.getElementById('reset'), counter = document.getElementById('counter'), sCounter = 0, mCounter = 0, hCounter = 0; setInterval(function () { sCounter++; if (sCounter == 60) { mCounter++; sCounter = 0; } if (sCounter < 10) { sCounter = "0" + sCounter; } if (mCounter < 10) { mCounter = "0" + mCounter; } if (hCounter < 10) { hCounter = "0" + hCounter; } counter.value = hCounter + " " + mCounter + " " + sCounter; }, 1000); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Everything - everything you'll want is here.</title> </head> <body> <script src="js/chronometer.js" charset="utf-8"></script> <div class="w3-row w3-container"> <div class="w3-col m3 w3-text-red"> <p> </p> </div> <div class="w3-col m6 w3-center w3-text-white w3-xxlarge"> <p> <i>Everything you'll want is here.</i> </p> </div> <div class="w3-col m3 w3-text-red"> <p> </p> </div> </div> <div class="w3-container w3-row"> <div class="w3-col m3 w3-text-red"> <p> </p> </div> <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey"> <p> Chronometer </p> </div> <div class="w3-col m3 w3-text-red"> <p> </p> </div> </div> <div class="w3-container w3-row"> <div class="w3-col m3 w3-text-red"> <p> </p> </div> <div class="w3-col m6 w3-center w3-white w3-text-grey"> <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center"> <br> <p> </p> <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()"> <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();"> <p> </p> </div> <div class="w3-col m3 w3-text-red"> <p> </p> </div> </div> </body> </html>
您將在每次迭代中串聯當前計數，並因此將其轉換為字符串。 快速解決方案是在每次迭代的開始將變量“轉換”為數字，如下所示：
mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;
參見https://jsbin.com/tulipotafa/1/edit?html,js，輸出或：
function startchrono() { var start = document.getElementById('start'), reset = document.getElementById('reset'), counter = document.getElementById('counter'), sCounter = 0, mCounter = 0, hCounter = 0; setInterval(function () { mCounter = +mCounter; hCounter = +hCounter; sCounter = +sCounter; sCounter++; if (sCounter == 60) { mCounter++; sCounter = 0; } if (sCounter < 10) { sCounter = "0" + sCounter; } if (mCounter < 10) { mCounter = "0" + mCounter; } if (hCounter < 10) { hCounter = "0" + hCounter; } counter.value = hCounter + " " + mCounter + " " + sCounter; }, 1000); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Everything - everything you'll want is here.</title> </head> <body> <script src="js/chronometer.js" charset="utf-8"></script> <div class="w3-row w3-container"> <div class="w3-col m3 w3-text-red"> <p> </p> </div> <div class="w3-col m6 w3-center w3-text-white w3-xxlarge"> <p> <i>Everything you'll want is here.</i> </p> </div> <div class="w3-col m3 w3-text-red"> <p> </p> </div> </div> <div class="w3-container w3-row"> <div class="w3-col m3 w3-text-red"> <p> </p> </div> <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey"> <p> Chronometer </p> </div> <div class="w3-col m3 w3-text-red"> <p> </p> </div> </div> <div class="w3-container w3-row"> <div class="w3-col m3 w3-text-red"> <p> </p> </div> <div class="w3-col m6 w3-center w3-white w3-text-grey"> <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center"> <br> <p> </p> <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()"> <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();"> <p> </p> </div> <div class="w3-col m3 w3-text-red"> <p> </p> </div> </div> </body> </html>
以這種方式使用setInterval將導致時鍾發生明顯漂移。
相反，您可以計算兩個日期之間的差額。 在啟動時鍾時創建一個日期實例，並在每一步中計算時差，然后將其格式化為您想要的內容。 假設now和then是日期的對象看起來會像下面這樣：
var diff = new Date(now - then);
var timeString = diff.toISOString().substr(11,8)
驗證彈出窗口中的電話 10 位數字，如果少於 10 位，則防止提交
[英]Validate the Phone 10 digit number in the pop up and prevent from being submitted if less than 10
如何在小於 10 的數字前插入零？ HTML 輸入框
[英]How can I insert a zero in front of a number less than 10? HTML Input Box
如果 function 小於數字且大於數字，如何啟動 function
[英]How to start a function if its less then a number and more then a number
在dojo中查詢商店以查找小於給定數字的數字
[英]Querying a store in dojo to find a number that is less than a given number
如果所選數字小於時鍾中的當前時間，如何禁用數字
[英]How to disabled number if the selected number is less than current time in the clock
如果小於最后一個序列號，則計數並打印序列號 +1 JavaScript
[英]Counting and printing a serial number +1 if less than last serial number JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.