解説！超シンプルなストップウォッチをjavascriptで！

HTML＆JavaScriptで超シンプルストップウォッチをプログラミングします。

インターネット上に探せばどこにでもありふれているプログラムですが、ちょっと遊べるゲームをつくりたいので一応作っておきます。

それではやっていきましょう。

つくりかた
まとめ

つくりかた

まずは、全文をお見せしましょう。

ほい。

<!DOCTYPE html>
 <html>
  <head>

  </head>
   <body>
    <div class="stopwatch">
     <h2>ストップウォッチ</h2>
      <p id="js-stopwatch">00:00:00:000</p>
      <input id="js-stopwatchStart" type="button" value="開始" />
      <input id="js-stopwatchStop" type="button" value="停止" disabled />
      <input id="js-stopwatchResset" type="button" value="リセット" disabled />
    </div>
    <script>
        // ■ストップウォッチ
      const $watch = document.getElementById("js-stopwatch");
      const $start = document.getElementById("js-stopwatchStart");
      const $stop = document.getElementById("js-stopwatchStop");
      const $resset = document.getElementById("js-stopwatchResset");

        // 開始時間
      let startTime;
        // 停止時間
      let stopTime = 0;
        // タイムアウトID
      let timeoutID;

        // 時間を表示する関数
      function displayTime() {
       const currentTime = new Date(Date.now() - startTime + stopTime);
       const h = String(currentTime.getHours() - 9).padStart(2, "0");
       const m = String(currentTime.getMinutes()).padStart(2, "0");
       const s = String(currentTime.getSeconds()).padStart(2, "0");
       const ms =String(currentTime.getMilliseconds()).padStart(3, "0");

       $watch.textContent = `${h}:${m}:${s}:${ms}`;
       timeoutID = setTimeout(displayTime, 10);
      }

        // スタートボタンがクリックされたら時間を進める
      $start.addEventListener("click", () => {
       $start.disabled = true;
       $stop.disabled = false;
       $resset.disabled = true;
       startTime = Date.now();
       displayTime();
      });

      // ストップボタンがクリックされたら時間を止める
      $stop.addEventListener("click", function () {
       $start.disabled = false;
       $stop.disabled = true;
       $resset.disabled = false;
       clearTimeout(timeoutID);
       stopTime += Date.now() - startTime;
      });

      // リセットボタンがクリックされたら時間を0に戻す
      $resset.addEventListener("click", function () {
       $start.disabled = false;
       $stop.disabled = true;
       $resset.disabled = true;
       $watch.textContent = "00:00:00:000";
       stopTime = 0;
      });
    </script>
   </body>
 </html>

うわーめっちゃ目が痛くなるー。

HTMLとJavaScriptがどこで分けられているかわかりますか？

今回はストップウォッチの解説なので、この違いは省きますね。

    <div class="stopwatch">
     <h2>ストップウォッチ</h2>
      <p id="js-stopwatch">00:00:00:000</p>
      <input id="js-stopwatchStart" type="button" value="開始" />
      <input id="js-stopwatchStop" type="button" value="停止" disabled />
      <input id="js-stopwatchResset" type="button" value="リセット" disabled />
    </div>

ここでは、HTMLで文字やらボタンやらを表示する指示を出しています。

<div class=”stopwatch”>から</div>までがひとくくりです。

stopwatchという箱だと思ってください。

２番目はただのタイトルです。

３番目の<p id=”js-stopwatch”>00:00:00:000</p>はjs-sotpwatchというID（なんでもいいです）のついた00:00:00:000というアイテムです。オブジェクト（置物）といいます。

4番目～６番目はスイッチです。type=”button”でボタンのような表示をすることができます。ただし、この時点ではなんもできないただのボタンです。

では次に、JavaScriptを見ていきましょう。

まず最初にこちら。

       // ■ストップウォッチ
      const $watch = document.getElementById("js-stopwatch");
      const $start = document.getElementById("js-stopwatchStart");
      const $stop = document.getElementById("js-stopwatchStop");
      const $resset = document.getElementById("js-stopwatchResset");

        // 開始時間
      let startTime;
        // 停止時間
      let stopTime = 0;
        // タイムアウトID
      let timeoutID;

これらは、それぞれの名前のついた箱を用意し、その中にdocument.getElementById（”先ほどのid”）というものを入れたと思ってください。

IDの要素をゲットだぜ！って感じです。

10行目の　stopTime = 0;　は、stopTimeに0という数字を置いておきましたよということです。

文字が多くて難しそうですが、やっていることは単純です。次。

        // 時間を表示する関数
      function displayTime() {
       const currentTime = new Date(Date.now() - startTime + stopTime);
       const h = String(currentTime.getHours() - 9).padStart(2, "0");
       const m = String(currentTime.getMinutes()).padStart(2, "0");
       const s = String(currentTime.getSeconds()).padStart(2, "0");
       const ms =String(currentTime.getMilliseconds()).padStart(3, "0");

       $watch.textContent = `${h}:${m}:${s}:${ms}`;
       timeoutID = setTimeout(displayTime, 10);
      }

ここでは、 function displayTime() {から}の間に時間を表示するためのプログラムをします。

currentTime の中には、計算式が入っています。その下からはそれぞれ時、分、秒、ミリ秒が書いてあり、それぞれ何桁まで表示するか、最初の数字は何かが記述されています。

$watch.textContent = `${h}:${m}:${s}:${ms}`;では、h、m、s、msの中に今の数字を入れてねって感じです。

timeoutID = setTimeout(displayTime, 10);は一定時間後にその処理をしてねってことです。1000で１秒（だと思います。）です。

     　  // スタートボタンがクリックされたら時間を進める
      $start.addEventListener("click", () => {
       $start.disabled = true;
       $stop.disabled = false;
       $resset.disabled = true;
       startTime = Date.now();
       displayTime();
      });

      // ストップボタンがクリックされたら時間を止める
      $stop.addEventListener("click", function () {
       $start.disabled = false;
       $stop.disabled = true;
       $resset.disabled = false;
       clearTimeout(timeoutID);
       stopTime += Date.now() - startTime;
      });

      // リセットボタンがクリックされたら時間を0に戻す
      $resset.addEventListener("click", function () {
       $start.disabled = false;
       $stop.disabled = true;
       $resset.disabled = true;
       $watch.textContent = "00:00:00:000";
       stopTime = 0;
      });

残りは、最初に表示できるようにしたボタンに、それぞれの機能を記述しています。

これでボタンを押すことでそれぞれの仕事をしてくれます。やったね！

で、完成品がこちら↓

ストップウォッチだぜぇ

あっ、文字化け。文字コードが合ってないみたい。宣言してなかったからなぁ。

一応、左がスタート、真ん中がストップ、左がリセットボタンです。

後で直しておきます。

まとめ

はい、というわけでストップウォッチができました。

このプログラムをちょっといじって簡単なゲームを作ってみたいと思います。

それではまた！