15分タイマーの作成方法

2024-03-14 11:36 タイマーJavaScriptコーディング

15分タイマーを作成するためには、まずHTMLで表示する要素を作成します。以下は、基本的なHTMLのテンプレートです。

<!DOCTYPE html>
<html>
<head>
    <title>15分タイマー</title>
</head>
<body>
    <h1>15分タイマー</h1>
    <div id="timer">15:00</div>
    <button onclick="startTimer()">スタート</button>
    <button onclick="stopTimer()">ストップ</button>
    <script src="timer.js"></script>
</body>
</html>

上記のテンプレートでは、<div id="timer">15:00</div>がタイマーの表示部分となります。<button>要素にはonclick属性を追加し、それぞれstartTimer()とstopTimer()という関数を呼び出すようにします。

次に、JavaScriptファイル（timer.js）を作成し、タイマーのロジックを実装します。以下は、タイマーをカウントダウンするための基本的なコード例です。

var timerElement = document.getElementById("timer");
var countdown;
function startTimer() {
    var minutes = 15;
    var seconds = 0;
    timerElement.textContent = formatTime(minutes, seconds);
    countdown = setInterval(updateTimer, 1000);
}
function stopTimer() {
    clearInterval(countdown);
}
function updateTimer() {
    var time = timerElement.textContent.split(":");
    var minutes = parseInt(time[0]);
    var seconds = parseInt(time[1]);
    if (minutes === 0 && seconds === 0) {
        stopTimer();
        alert("タイマーが終了しました！");
    } else if (seconds === 0) {
        minutes--;
        seconds = 59;
    } else {
        seconds--;
    }
    timerElement.textContent = formatTime(minutes, seconds);
}
function formatTime(minutes, seconds) {
    return minutes.toString().padStart(2, "0") + ":" + seconds.toString().padStart(2, "0");
}

上記のコードでは、startTimer()関数が呼ばれると、15分のカウントダウンが開始されます。setInterval()関数を使用して、1秒ごとにupdateTimer()関数が呼ばれ、タイマーの表示が更新されます。

stopTimer()関数は、タイマーのカウントダウンを停止するためにclearInterval()を呼び出します。

updateTimer()関数では、現在の時間を取得し、残り時間を計算して表示を更新します。また、タイマーが0になった場合には終了処理を行います。

formatTime()関数は、時間の表示形式を整形するために使用されます。

以上が、15分タイマーを作成するための基本的な方法とコード例です。このコードを利用して、自分のWebページやアプリケーションに組み込んでみてください。