ウェブページにリアルタイムで現在の日時を表示する機能は、多くの場面で有用です。例えば、タイムセールやカウントダウンタイマー、ログのタイムスタンプなど、さまざまな用途で活用できます。この記事では、JavaScriptを使用して、ウェブページに現在の日時をリアルタイムで表示する方法を詳しく解説します。
必要なHTML要素の準備
まず最初に、日時を表示するためのHTML要素を作成します。以下のように、<div>タグを用いてIDを指定します。
<div id="datetime"></div>この<div>要素は、JavaScriptからアクセスして日時を表示する場所となります。
JavaScriptで日時を取得する
次に、JavaScriptを使用して現在の日時を取得します。JavaScriptにはDateオブジェクトがあり、これを用いて日時情報を取得できます。
const now = new Date();
const datetimeString = now.toLocaleString();new Date()で現在の日時を取得し、toLocaleString()メソッドでそれを文字列に変換しています。
リアルタイムで更新する
現在の日時をリアルタイムで表示するためには、一定間隔で日時を更新する必要があります。JavaScriptのsetInterval関数を使用すると、指定した時間間隔で関数を繰り返し実行できます。
// 関数を初めて呼び出す
displayDateTime();
// 1秒ごとに関数を呼び出すように設定
setInterval(displayDateTime, 1000);このコードでは、displayDateTime関数を1秒（1000ミリ秒）ごとに呼び出しています。
完全なコードサンプル
以下は、これまでの手順を組み合わせた完全なコードサンプルです。
<!DOCTYPE html>
<html>
<head>
<title>リアルタイム日時表示</title>
</head>
<body>
<div id="datetime"></div>
<script>
function displayDateTime() {
const now = new Date();
const datetimeString = now.toLocaleString();
document.getElementById("datetime").innerText = datetimeString;
}
displayDateTime();
setInterval(displayDateTime, 1000);
</script>
</body>
</html>まとめ
この記事では、JavaScriptを使用してウェブページにリアルタイムで現在の日時を表示する方法を解説しました。HTMLで表示場所を確保し、JavaScriptで日時を取得、そしてsetIntervalでリアルタイムに更新するという流れです。この基本的なテクニックをマスターすることで、さまざまなリアルタイム表示機能に応用することができます。
