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