【HTML,CSS,JavaScript】ストップウォッチを作成する方法
ストップウォッチ機能（タイマー開始、タイマー停止、タイマーリセット）を作成する方法を解説します。
こういった方へ向けた記事です ①ストップウォッチを作成する方法を知りたい
目次 １．ストップウォッチ完成イメージ ２．ストップウォッチ作成方法
１．ストップウォッチ完成イメージ
(1)初期状態はタイマー表示が「00:00.000」で、「Start」ボタンが活性、「Stop」「Reset」ボタンが非活性でです。
(2)「Start」ボタンをクリックすると、タイマーが開始されます。「Stop」ボタンのみが活性となっています。
(3)「Stop」ボタンをクリックすると、タイマーが停止します。「Start」「Reset」ボタンが活性となっています。
(4)再び「Start」をクリックすると、タイマーが動き出します。「Stop」をクリックすると、タイマーが停止します。
(5)「Reset」ボタンをクリックすると、タイマー表示を「00:00.000」に上書きします。「Start」ボタンのみが活性となります。
２．ストップウォッチ作成方法
下記を参考にしてください。大事な箇所は赤い文字にしてあります。（※スマホだと赤くなっていないかもしれませんので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;
});
}
誰かの参考になれば幸いです。
