【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」ボタンのみが活性となります。

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; }); }
誰かの参考になれば幸いです。