JS+JQueryでストップウォッチ

#はじめに
JS+JQueryを使うストップウォッチの作り方を説明します！
JS学習し始めの方におすすめのミニアプリです！
いくつかポイントを抑えれば簡単にできますので挑戦してみましょう！

#コード紹介
ストップウォッチのコードはこちらです！

See the Pen BaQgjmV by Ryuji Watanabe (@ryuji0526) on CodePen.

###ポイント1　経過時間の出し方

スタートボタン押した時の操作

 $("#start").click(function() {
    startTime = Date.now();
    runTimer();
  });　

スタートボタンを押した時の時間をDate.now()で取得します。

runTimer()

  function runTimer(){
    currentTime = Date.now();
    showTime();
    setTimeoutId = setTimeout(() => {
      runTimer();
    },10)
  }

スタート時間からの差を求めるためにをcurrentTimeで経過時間を保持します。
さらに、setTimeout()で10ミリ秒ごとに経過時間の更新とshowTime関数を実行します。

showTime()

  function showTime(){
    let d = new Date(currentTime - startTime + elapsedTime);
    const getMin = d.getMinutes();
    const getSec =d.getSeconds();
    const getMillisec = Math.floor(d.getMilliseconds() / 10);
    $("#timer").text(`${String(getMin).padStart(2,'0')}:${String(getSec).padStart(2,'0')}:${String(getMillisec).padStart(2,'0')}`);
  }

currentTimeからstartTime引くことで、スタートボタンを押してからの経過時間を求めることができます。
それをnew Dateクラスの引数に入れ、get~メソッドで、分、秒、ミリ秒をそれぞれgetしてテキストに埋め込めばよいのです！

###ポイント2 ストップ時の操作

ストップボタン押した時の操作

  $("#stop").click(function() {
    elapsedTime += currentTime - startTime;
    clearTimeout(setTimeoutId);
  });

2行目の

elapsedTime += currentTime - startTime;

は、ストップを押した後にスタートを押したとき、00:00:00から始まってしまうのを防ぐために用います。ストップ時に今までの経過時間を変数で保持します。

  function showTime(){
    let d = new Date(currentTime - startTime + elapsedTime);
    const getMin = d.getMinutes();
    const getSec =d.getSeconds();
    const getMillisec = Math.floor(d.getMilliseconds() / 10);
    $("#timer").text(`${String(getMin).padStart(2,'0')}:${String(getSec).padStart(2,'0')}:${String(getMillisec).padStart(2,'0')}`);
  }

そして、先ほどには記入を省きましたが、2行目の、new Date()で経過時間を求めるときに先程の変数を足してあげるとで、ストップした時間から新たにストップウォッチを動かすことができます。

#おわりに
以上が簡単なストップウォッチのコードと説明になります。
別の機能を追加したり、スタイルなども工夫して、もっと見やすく便利でオリジナルなストップウォッチを作ってみましょう！