10より小さい数字がクロノメーターにある場合、数字の最初の0が繰り返されます

クロノメーターをしています。クロノに表示される数字が1 、2、3 ...、あなたが各繰り返しで現在のカウントを連結するため、文字列に変換されているクロノに01、02、03 ...10より小さい数字がクロノメーターにある場合、数字の最初の0が繰り返されます

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>

出典

2016-07-06 Alexis Q.D

可能な複製を（http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript） – Mehraban

表示されます。迅速な解決策は、このような各反復の開始時に番号に変数を「キャスト」することです：

mCounter = +mCounter; 
hCounter = +hCounter; 
sCounter = +sCounter;

を参照してくださいhttps://jsbin.com/tulipotafa/1/edit?html,js,outputか：この方法でsetIntervalを使用して

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>

出典

2016-07-06 14:10:12 kenda

私の質問にお答えいただきありがとうございます。しかし、あなたが変数に追加した '+'記号で、すべての整数を文字列に変換できますか？ –

他の方法。文字列から数字へこれは単にNumber（文字列）またはparseInt（文字列）の略語です。 – kenda

クロックがかなりドリフトします。

代わりに、2つの日付の差を計算することができます。あなたが時計を始めると日付のインスタンスを作成し、すべてのステップで時間差を計算し、あなたの心の欲望にそれをフォーマットします。 nowとthenは日付オブジェクトであると仮定すると、それは次のようになります[？どうやってではJavaScriptを使用してZerofilled値を作成することができます]の

var diff = new Date(now - then); 
var timeString = diff.toISOString().substr(11,8)

出典

2016-07-06 14:16:12 fredefox

10より小さい数字がクロノメーターにある場合、数字の最初の0が繰り返されます

答えて

関連する問題