やっぱり。JavaScript！-ストップウオッチを作ろう！ - 2

スタートしてストップできるようになりました。取得した数字をわかる数字にして表示部分に出るようにしていきます。ミリ秒で取得した数字を分、秒、ミリ秒に変換していきます。

elapsedTimeで取得した数字をMath.floorの命令を使い変数に入れていきます。

Math.floor() - JavaScript | MDN

割り算した結果の数字、最大の整数を取得します。そのあと桁数を合わせるために"0"で埋めていく操作をします。それが、".slice"を使った命令になります。最後にテキストを挿入するには"timer.textContent"で、"id timer"部分に表示させます。HTMLを認識させたいときはinnerHTMLを使います。

function updateTimetText(){ 
       let m = Math.floor(elapsedTime / 60000);
       let s = Math.floor(elapsedTime % 60000 / 1000);
       let ms = elapsedTime % 1000;

       m = ('0' + m).slice(-2); 
       s = ('0' + s).slice(-2);
       ms = ('0' + ms).slice(-3);
      
       timer.textContent = m + ':' + s + ':' + ms;
   }

これで取得した数字を画面に表示させることができそうです。.addEventListenerに追加していきましょう！

intervalID = setInterval(function(){
	       
	       const nowDate = Date.now() 
				
		   elapsedTime += nowDate - startTime	
	
		　　updateTimetText()	

 
		  }, 10)

　updateTimetText()

追加しています。これを実行してみると、数字は表示されますが何かおかしいです。数が大きくなってしまっています。setIntervalで次々更新され、elapsedTimeにどんどん追加され数が大きくなています。これを修正するために、以下のように

startTime = nowDate

スタート時の数字を現在の数字に置き換えて、更新していかないといけません。こうすることによりまく表示されるようになります。更新されるごとにstartTimeを変える必要があります。

この状態を克服するためにもう一つのタイマー処理についても試してみましょう。

setTimeout()

です。

これは1回切りの命令となっています。ですが、再起と言う考え方、関数の中の関数を実行、から繰り返し実行することができるようになっています。

start.addEventListenerに上記を追加してどうなるかみてみましょう。

function countUp(){

       timerId = setTimeout(function(){

       elapsedTime = Date.now() - startTime ;
       
       updateTimetText()
       
       },10);
   }

追加したのが以下です。

start.addEventListener("click", function(){
	  	
	  	startTime = Date.now();
	  	
	  	countUp();

	})

スッキリしました。関数でまとめたおかげで見やすくなりました。これで、スタートできるようになりました。setTimeoutを使うようにしたのでストップのボタンのコードも変更しないといけません。clearTimeoutとして変数もtimerIdを入れます。

	stop.addEventListener("click", function(){

　　　　　clearTimeout(timerId)
	
 	})

そして、リセットの命令も付け加えます。

reset.addEventListener("click", function(){
	
	 elapsedTime = 0;
	 
	 updateTimetText()
	
 	})

elapsedTime を"0"に初期化してupdateTimetText()で更新してやれば、最初の数字になります。

これで一通りスタート、ストップ、リセットと機能が揃いました。