JavaScriptでストップウォッチ

サンプル

See the Pen js ストップウォッチ by takapen (@takapen) on CodePen.

html

0.00

JavaScript

(function(){//即時関数で囲うとほかのプログラムに影響を与えない
  "use strict";//最近は厳密なエラーチェックをするのが推奨されている
  
  var startTime;//タイムを押した時の時刻を保持しておくため
  var timerId;//タイマーを回していくので
  var elapsedTime = 0;//タイマー経過をこの変数で保持
  
  var timetext = document.getElementById("js-timetext");
  var btnStart = document.getElementById("js-btn--start");
  var btnStop = document.getElementById("js-btn--stop");
  var btnReset = document.getElementById("js-btn--reset");
  
  //startボタンを2回クリックすると2回起動してしまってstopを2回押さないといけない状態を解決する
  function setBtnState (start, stop, reset){//ボタンの状態をture or falseで渡す
    btnStart.disabled = !start;//false startの否定
    btnStop.disabled = !stop;
    btnReset.disabled = !reset;
  }
  
  //起動直後はstartボタンだけtrueにしたい
  setBtnState (true, false, false);
  
  btnStart.addEventListener("click", function(){
    startTime = Date.now();//1970年 1月1日 00:00:00 からの経過ミリ秒を取得
    updateTimerText();//再帰的に実行したいのでファンクションを用意
    setBtnState (false, true, false);//startをクリックしたらstopだけtrueにする
  });


  btnStop.addEventListener("click", function(){
    elapsedTime += Date.now() - startTime;//現在の時間から最初の時間を引いたものを足しあげる
    clearTimeout(timerId);//止める
    setBtnState (true, false, true);//stopをクリックしたらstop以外をtrueに
  });
  
  btnReset.addEventListener("click" , function(){
    timetext.innerHTML = "0.00";//0.00に書き換える
    elapsedTime = 0;//0に書き換える
    setBtnState (true, false, false);//resetを押したら最初と同じ状態に
  });

  function updateTimerText(){//updateTimerTextという関数を用意
    timerId = setTimeout(function(){
      var t = Date.now() - startTime + elapsedTime;
      timetext.innerHTML = (t / 1000).toFixed(2);//ミリ秒を普通の秒になおすために1000で割る。toFixedは2ケタまで表示
      updateTimerText();//繰り返し実行したいので
    }, 10);//10ミリ秒間隔で実行
  }

})();

bottonタグを使わず装飾するとこんな感じになります

See the Pen js ストップウォッチ 装飾 by takapen (@takapen) on CodePen.

参照 ： ドットインストール