【HTML,CSS,JavaScript】ストップウォッチを作成する方法

ストップウォッチ機能(タイマー開始、タイマー停止、タイマーリセット)を作成する方法を解説します。

こういった方へ向けた記事です
①ストップウォッチを作成する方法を知りたい
目次
1.ストップウォッチ完成イメージ
2.ストップウォッチ作成方法

1.ストップウォッチ完成イメージ

(1)初期状態はタイマー表示が「00:00.000」で、「Start」ボタンが活性、「Stop」「Reset」ボタンが非活性でです。

(2)「Start」ボタンをクリックすると、タイマーが開始されます。「Stop」ボタンのみが活性となっています。

(3)「Stop」ボタンをクリックすると、タイマーが停止します。「Start」「Reset」ボタンが活性となっています。

(4)再び「Start」をクリックすると、タイマーが動き出します。「Stop」をクリックすると、タイマーが停止します。

(5)「Reset」ボタンをクリックすると、タイマー表示を「00:00.000」に上書きします。「Start」ボタンのみが活性となります。

0円でプログラミングを学ぼう【0円スクール】

2.ストップウォッチ作成方法

下記を参考にしてください。大事な箇所は赤い文字にしてあります。(※スマホだと赤くなっていないかもしれませんのでPC推奨)

HTML(ndex.html)

<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="uf-8">
  <title>StopWatch</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div id="timer">00:00.000</div>
    <div class="controls">
      <div id="start" class="btn">Start</div>
      <div id="stop" class="btn">Stop</div>
      <div id="reset" class="btn">Reset</div>
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS(styles.css)

body {
  font-size: 14px;
  background-color: #88F
}

.container {
  margin: 25px auto;
  width: 200x;
  background: #fff;
  padding: 30px;
  text-align: center;
}

.btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #e77;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

#timer {
  background: #e77;
  height: 100px;
  line-height: 100px;
  font-size: 50px;
  margin-bottom: 10px;
}

.controls {
  display: flex; /* ボタン横並び */
  justify-content: space-between;
}

/* 活性・非活性 */
.inactive {
  opacity: 0.6;
}

JavaScript(main.js)

'use strict';

{
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');

  let startTime;       // Startボタンクリック時の時刻
  let timeoutid;       // ID
  let elapsedTime = 0; // StartからStopまでの経過時間

  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    /* padStart()で二桁または三桁固定表示とする */
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    /* 描画 */
    timer.textContent = `${m}:${s}.${ms}`;

    timeoutid = setTimeout(() => {
      //再帰呼び出し
      countUp();
    }, 10);
  }

  // 状態:初期 または Reset直後
  function setButtonStateInitial() {
    start.classList.remove('inactive'); // 活性
    stop.classList.add('inactive');     // 非活性
    reset.classList.add('inactive');    // 非活性
  }

  // 状態:タイマー動作中
  function setButtonStateRunning() {
    start.classList.add('inactive');    // 非活性
    stop.classList.remove('inactive');  // 活性
    reset.classList.add('inactive');    // 非活性
  }

  // 状態:タイマー停止中
  function setButtonStateStopped() {
    start.classList.remove('inactive'); // 活性
    stop.classList.add('inactive');     // 非活性
    reset.classList.remove('inactive'); // 活性
  }

  // ボタンを'初期'状態とする
  setButtonStateInitial()

  // Startボタンクリック
  // …タイマーを開始します
  start.addEventListener('click', () => {
    if (start.classList.contains('inactive') === true) {
      return;
    }
    // ボタンをタイマー'動作中'状態とする
    setButtonStateRunning();
    startTime = Date.now();
    countUp();
  });

  // Stopボタンクリック
  // …タイマーを停止します
  stop.addEventListener('click', () => {
    if (stop.classList.contains('inactive') === true) {
      return;
    }
    // タイマーを'停止中'状態とする
    setButtonStateStopped();
    clearTimeout(timeoutid);
    elapsedTime += Date.now() - startTime;
  });

  // Resetボタンクリック
  // …タイマーを「00:00.000」で上書きします
  reset.addEventListener('click', () => {
    if (reset.classList.contains('inactive') === true) {
      return;
    }
    // ボタンを'初期'状態とする
    setButtonStateInitial()
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });
}

誰かの参考になれば幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中