JavaScriptで現在の時間を取得して表示する方法

ウェブサイトやウェブアプリケーションに現在の時間を表示する機能を
追加したいと思ったことはありませんか?
JavaScriptを使えば、簡単に現在の時間を取得して表示することができます。
この記事では、基本的な方法を紹介します。

必要なHTMLの準備

まず、時間を表示するためのHTML要素を準備します。
例えば、以下のように<h1>タグを使用して表示場所を確保します。

<!DOCTYPE html>
<html>
<head>
<title>現在の時間を表示</title>
</head>
<body>
<h1 id="currentTime">現在の時間: </h1>
</body>
</html>

JavaScriptの実装

次に、JavaScriptで現在の時間を取得し、
それを先ほど用意したHTML要素に表示するコードを書きます。

<script>
function displayCurrentTime() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const formattedTime = `${hours}:${minutes}:${seconds}`;
document.getElementById('currentTime').innerText = `現在の時間: ${formattedTime}`;
}

// 初回表示
displayCurrentTime();

// 1秒ごとに時間を更新
setInterval(displayCurrentTime, 1000);
</script>

コードの解説

displayCurrentTime関数の定義:

new Date()で現在の日時を取得します。

getHours(), getMinutes(), getSeconds()メソッドを使用して、それぞれ時、分、秒を取得します。

toString().padStart(2, ‘0’)を使って、各値を2桁にフォーマットします(例:8時5分 → 08:05)。

フォーマットした時間をcurrentTimeというIDを持つ要素に表示します。

初回表示:

displayCurrentTime()を最初に呼び出して、ページが読み込まれたときに現在の時間を表示します。

時間の更新:

setInterval(displayCurrentTime, 1000)を使って、1秒ごとにdisplayCurrentTime関数を呼び出し、時間を更新します。

実際の動作

このコードをHTMLファイルとして保存し、ブラウザで開くだけで、
現在の時間が1秒ごとに更新されて表示されます。
例えば、ファイル名をcurrent-time.htmlとして保存し、ブラウザで開いてみてください。

まとめ

JavaScriptを使えば、簡単に現在の時間をリアルタイムで表示することができます。
上記の基本的な方法を応用して、ウェブサイトやウェブアプリケーションに
もっと複雑な機能を追加することも可能です。
ぜひ試してみてください!