カウントアップインターバルタイマー
経過時間: 0秒
以下がカウントアップのインターバルタイマーの実装例です。タイマーが動作している間は、Startボタンを押せません。Stopボタンを押すと、タイマーが止まり、再度Startボタンを押すことができます。
```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>カウントアップインターバルタイマー</title>
</head>
<body>
<h1>カウントアップインターバルタイマー</h1>
<p>経過時間: <span id="timer">0秒</span></p>
<button id="start_btn" onclick="startTimer()">Start</button>
<button id="stop_btn" onclick="stopTimer()" disabled>Stop</button>
<script>
let timerId = null;
let elapsedTime = 0;
function startTimer() {
document.getElementById("start_btn").disabled = true;
document.getElementById("stop_btn").disabled = false;
timerId = setInterval(updateTimer, 1000);
}
function stopTimer() {
document.getElementById("start_btn").disabled = false;
document.getElementById("stop_btn").disabled = true;
clearInterval(timerId);
timerId = null;
}
function updateTimer() {
elapsedTime++;
const seconds = (elapsedTime % 60).toString().padStart(2, "0");
const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, "0");
document.getElementById("timer").textContent = `${minutes}:${seconds}`;
}
</script>
</body>
</html>
```
ジョークとしては、タイマーを使って「オッ、マザーファッカースタグラム!」のように語呂を合わせた言葉を作るアプリにしても面白そうですね。ただし、語呂を合わせた言葉には言葉遣いに注意が必要です。