はじめに
この記事を読めば、HTMLでリアルタイムの年月日表示を簡単に実装できるようになります。
初心者の方でもわかりやすく解説しているので、ぜひ最後までお読みください。
●HTMLでのリアルタイム年月日表示とは?
リアルタイム年月日表示とは、ウェブページに訪問者がアクセスした瞬間の年月日を表示する機能のことです。
JavaScriptを使用してHTMLに実装することができます。
●リアルタイム年月日表示の基本的な実装方法
まずは、リアルタイム年月日表示の基本的な実装方法をご紹介します。
下記のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リアルタイム年月日表示サンプル</title>
<script>
function displayDate() {
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const day = today.getDate();
document.getElementById("dateDisplay").innerText = `${year}年${month}月${day}日`;
}
window.onload = displayDate;
</script>
</head>
<body>
<h1>今日の日付は<span id="dateDisplay"></span>です。</h1>
</body>
</html>
このサンプルコードでは、JavaScriptのDate
オブジェクトを利用して現在の年月日を取得し、その値をHTMLの<span>
要素に表示しています。
window.onload
イベントを使って、ページが読み込まれたタイミングでdisplayDate
関数を実行しています。
●カスタマイズ方法
リアルタイム年月日表示をカスタマイズする方法もいくつかあります。
例えば、表示形式を変更したり、曜日を追加したりすることができます。
それぞれのカスタマイズ方法について、サンプルコードを交えながら解説していきます。
○表示形式の変更
表示形式を変更するには、displayDate
関数内のテンプレートリテラルを編集します。
例えば、下記のように変更することで、日付の区切りをスラッシュにすることができます。
document.getElementById("dateDisplay").innerText = `${year}/${month}/${day}`;
また、月や日について、1桁の場合に0を補って2桁表示にすることもできます。
その場合は、下記のようにString.prototype.padStart()
メソッドを使用してください。
const monthStr = String(month).padStart(2, '0');
const dayStr = String(day).padStart(2, '0');
document.getElementById("dateDisplay").innerText = `${year}/${monthStr}/${dayStr}`;
○曜日の追加
曜日を追加するには、Date
オブジェクトから曜日の情報を取得し、それを日本語に変換します。
下記のサンプルコードを参考にしてください。
function displayDate() {
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const day = today.getDate();
const dayOfWeek = today.getDay();
const dayOfWeekStr = ['日', '月', '火', '水', '木', '金', '土'][dayOfWeek];
document.getElementById("dateDisplay").innerText = `${year}年${month}月${day}日(${dayOfWeekStr})`;
}
window.onload = displayDate;
このコードでは、Date.prototype.getDay()
メソッドを使って曜日の情報を取得し、日本語の曜日に変換して表示しています。
●注意点
リアルタイム年月日表示を実装する際の注意点をいくつか挙げます。
○JavaScriptが無効になっている場合
JavaScriptが無効になっている場合、表示されない可能性があります。
そのため、JavaScriptが無効であることを考慮した対処法が必要です。
例えば、<noscript>
タグを使用して、JavaScriptが無効な場合にメッセージを表示することができます。
<noscript>
<p>JavaScriptが無効になっているため、日付表示ができません。</p>
</noscript>
○ページの読み込み速度に影響する場合
JavaScriptのコードを最後に配置するか、async
属性やdefer
属性を使用して、非同期に読み込むようにすることで、読み込み速度を改善できます。
●応用例:カウントダウンタイマーの実装
リアルタタイム年月日表示の知識を応用して、カウントダウンタイマーを実装する方法をご紹介します。
下記のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カウントダウンタイマーサンプル</title>
<script>
function updateCountdown() {
const targetDate = new Date("2023-12-31T00:00:00");
const now = new Date();
const remainingTime = targetDate - now;
if (remainingTime > 0) {
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
document.getElementById("countdownDisplay").innerText = `${days}日${hours}時間${minutes}分${seconds}秒`;
} else {
document.getElementById("countdownDisplay").innerText = "カウントダウン終了!";
clearInterval(timer);
}
}
let timer;
window.onload = function() {
updateCountdown();
timer = setInterval(updateCountdown, 1000);
}
</script>
</head>
<body>
<h1>2023年12月31日まであと<span id="countdownDisplay"></span>です。</h1>
</body>
</html>
このサンプルコードでは、指定した日時までのカウントダウンを表示します。
updateCountdown
関数で、目標日時と現在日時の差を計算し、残り時間を日・時間・分・秒に分解して表示しています。
window.onload
イベントで、updateCountdown
関数を初回実行し、その後setInterval
で1秒ごとに更新しています。
まとめ
以上で、HTMLでリアルタイム年月日表示の実装方法、カスタマイズ方法、注意点、応用例を徹底解説しました。
これで、あなたも簡単にリアルタイム年月日表示を実装できるようになりましたね。
最後までお読みいただきありがとうございました。
この記事が、あなたのウェブサイト制作に役立てば幸いです。