時刻・タイマー処理: JavaScriptによるHTMLの変更

Posted on by

JavaScriptを使ってHTMLコンテンツをリアルタイムで更新する方法は、
多くのインタラクティブなウェブアプリケーションにおいて重要な役割を果たします。
この記事では、具体的に時刻表示とタイマー機能の実装を通じて、
JavaScriptがどのようにHTMLを動的に変更するかを解説します。

JavaScriptによるリアルタイム時刻表示

リアルタイムの時刻を表示するためには、JavaScriptの Date オブジェクトと
setInterval メソッドを使います。
以下のステップに従って時刻を表示するサンプルコードを実装します。

HTMLの準備

HTMLの基本的な構造は以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リアルタイム時刻表示</title>
</head>
<body>
    <div id="clockDisplay">時刻がここに表示されます</div>

    <script src="clock.js"></script>
</body>
</html>

JavaScriptの実装

clock.js に以下のJavaScriptコードを記述します。

function showTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString();
    document.getElementById('clockDisplay').textContent = timeString;
}

setInterval(showTime, 1000);

このコードでは、showTime 関数が現在時刻を取得し、
その時刻を clockDisplay の div 要素に表示します。
setInterval はこの関数を1秒ごとに繰り返し呼び出し、時刻を更新します。

JavaScriptによるタイマー機能の実装

次に、ユーザーが設定した秒数後に何かアクションを実行するタイマー機能を作成します。

HTMLの追加

先のHTMLにタイマー機能を追加します。

<input type="number" id="timerSeconds" placeholder="秒数を入力">
<button onclick="startTimer()">タイマー開始</button>
<p id="timerOutput"></p>

JavaScriptの追加

clock.js にタイマー機能を追加します。

function startTimer() {
    const seconds = document.getElementById('timerSeconds').value;
    const timerOutput = document.getElementById('timerOutput');
    timerOutput.textContent = "タイマーが開始されました。";

    setTimeout(() => {
        timerOutput.textContent = "タイマーが終了しました！";
    }, seconds * 1000);
}

このコードでは、ユーザーが入力した秒数後にメッセージを更新します。
setTimeout は指定された時間が経過した後に一度だけ関数を実行します。

まとめ

この記事では、JavaScriptを使用してHTMLページ上でリアルタイムに時刻を表示したり、
独自のタイマーを実装する方法を学びました。
これらの技術は、ウェブ開発において非常に有用で、
多様なシナリオで活用することができます。
動的なウェブアプリケーションを作成するための基礎として、
これらの基本的な機能を理解し活用することが重要です。