HTMLで時間を表示して動的に変化させる方法
このページでは、HTMLで現在時刻や日時を表示する方法、そしてJavaScriptを使って動的に変化するデジタル時計を実装する方法を分かりやすく解説します。初心者の方にも理解しやすいように、コード例を交えながら説明していきます。
HTMLで時間表示: 基礎知識
HTMLだけで現在時刻を表示することはできませんが、JavaScriptと組み合わせることで実現できます。ここでは、JavaScriptの基本的な時間操作について解説します。
現在の日時を表示
JavaScriptの Date オブジェクトを使うと、現在の年、月、日、時間、分、秒を取得できます。
<p id="today"></p>
<script>
const today = new Date();
document.getElementById("today").textContent = today;
</script>
フォーマットを指定
toLocaleDateString や toLocaleTimeString メソッドを使うと、日付や時刻の表示形式をカスタマイズできます。
<p id="formatted-date"></p>
<script>
const today = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById("formatted-date").textContent = today.toLocaleDateString('ja-JP', options);
</script>
タイムゾーンを考慮
Intl.DateTimeFormat オブジェクトを使うと、ユーザーのタイムゾーンに合わせて日時を表示できます。
<p id="localized-date"></p>
<script>
const today = new Date();
const options = { timeZone: 'Asia/Tokyo', hour: 'numeric', minute: 'numeric', second: 'numeric' };
document.getElementById("localized-date").textContent = new Intl.DateTimeFormat('ja-JP', options).format(today);
</script>
JavaScriptで動的なデジタル時計を作成
ここでは、JavaScriptを使って動的に変化するデジタル時計を作成する方法を解説します。
setInterval() を活用
setInterval() メソッドを使うと、指定した間隔でJavaScriptの関数を実行できます。これを利用して、時計の表示を1秒ごとに更新します。
HTML要素の更新
getElementById などを用いてHTML要素を取得し、その内容をJavaScriptで動的に書き換えることで、時計の表示を更新します。
サンプルコードと解説
<p id="clock"></p>
<script>
function updateClock() {
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');
document.getElementById("clock").textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
</script>
このコードでは、updateClock 関数が1秒ごとに呼び出され、現在時刻を取得してHTML要素に表示します。
時間表示の応用
時間表示は、デジタル時計以外にも様々な応用が考えられます。
カウントダウンタイマー
指定した日時までの残り時間を表示するカウントダウンタイマーも実装できます。
ストップウォッチ
ボタン操作で開始、停止、リセットができるストップウォッチも実装できます。
アニメーション効果
CSSのトランジションやアニメーションを使って、時間表示に動きを加えることもできます。
まとめ
本記事では、HTMLで時間表示を行う基本から、JavaScriptを使った動的なデジタル時計の実装、そして応用例までを解説しました。これらの知識を活かして、自身のウェブサイトに魅力的な時間表示機能を追加してみてください。
その他の参考記事:jquery 時間 指定