もくじ
Webサイトの運営やキャンペーン等で「指定した日時だけ要素を表示したい」「期間限定でバナーを出したい」と思ったことはありませんか？
JavaScriptを使えば、特定の日付・時刻を指定して、HTML要素の表示・非表示を自動で切り替える仕組みを簡単に実装できます。
この記事では、ライブラリ不要で実現できる実装方法や、実際のコード例、注意点まで詳しく解説します。
JavaScriptの更新のみでバナーの表示の切り替えを行う方法は以下の記事で紹介しています。
-
【JavaScript】期間を指定してバナーの切り替え・表示・非表示を制御する方法
もくじJavaScriptファイルの更新のみでバナーの切り替え・表示・非表示を制御実装コード使用方法１．バナーを表示させたいページにHTMLコンテナを設置する２．バナーを表示させたいページにCSSを追 ...
HTMLファイルの更新のみで要素の表示・非表示を制御
各HTMLファイルに、CSS、JavaScriptファイルを設置することで、要素の表示の切り替えを制御することが可能です。
実装コード
以下のコードは時間制限のある表示制御が必要な場面で便利です。
<div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-18T12:00:00" data-hide="2024-09-20T12:00:00">サンプル1</div><div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-15T10:00:00" data-hide="2024-09-16T18:00:00">サンプル2</div>.dateTimeSwitching { display: none;}(function () { // 全ての js-date-time-switching クラスを持つ要素を取得 const jsDateTimeSwitching = document.querySelectorAll('.js-date-time-switching'); // 日付の妥当性を確認する関数 function isValidDate(date) { return date instanceof Date && !isNaN(date); } // 要素ごとに表示・非表示を制御する function updateDateTimeSwitchingVisibility() { const now = new Date(); // 現在の日時を取得 jsDateTimeSwitching.forEach(element => { // データ属性から表示・非表示の日時を取得 const showDateAttr = element.getAttribute('data-show'); const hideDateAttr = element.getAttribute('data-hide'); // 日時を変換 const showDate = showDateAttr ? new Date(showDateAttr) : null; const hideDate = hideDateAttr ? new Date(hideDateAttr) : null; // 日時の妥当性を確認 const isShowDateValid = !showDate || isValidDate(showDate); const isHideDateValid = !hideDate || isValidDate(hideDate); // 日時が無効であれば非表示に設定 if (!isShowDateValid || !isHideDateValid) { return; // 無効な要素はスキップ } // 現在の日時との比較 let shouldDisplay = true; // デフォルトでは表示 if (showDate && now < showDate) { // `data-show` が存在し、現在日時が指定日時より前なら非表示 shouldDisplay = false; } if (hideDate && now > hideDate) { // `data-hide` が存在し、現在日時が指定日時を過ぎていれば非表示 shouldDisplay = false; } // 表示・非表示を制御 element.style.display = shouldDisplay ? 'block' : 'none'; }); } // 初期状態で実行 updateDateTimeSwitchingVisibility(); // 1秒ごとにチェックして更新 setInterval(updateDateTimeSwitchingVisibility, 1000);})();使用方法
１．HTMLを設置する
data-showとdata-hideというカスタム属性があり、表示・非表示にしたい日時を設定します。
日付はYYYY-MM-DDTHH:MM:SS形式で設定する必要があります。
- data-show
- この日付・時刻から表示を開始する
- data-hide
- この日付・時刻で表示を終了する
２．CSSを設置する
初期状態では、dateTimeSwitchingクラスを持つ要素をdisplay: none;にして、JavaScriptで条件に基づいて表示されるように設定します。
３．JavaScriptを設置する
JavaScriptで、HTMLのカスタム属性で指定した日時に応じて要素の表示・非表示を制御します。
data-showやdata-hideのいずれかに無効な文字列がある場合、その要素は無視されます（非表示のまま）。
data-showが設定されていない場合、表示の開始時刻に制限がないため、その要素は現在の時刻に関係なく「即時に表示」されます。
data-hideが設定されていない場合、その要素は「ずっと表示」されます。
両方の属性がない場合、その要素は常に表示されることになります。
以下のようなHTML構造の要素があった場合、表示の制御は以下のようになります。
<div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-18T12:00:00" data-hide="2024-09-20T12:00:00"> 要素1: 指定日時になると表示されます</div><div class="dateTimeSwitching js-date-time-switching" data-hide="invalid date"> 要素2: 無効な日付が設定されているため表示されません</div><div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-21T09:00:00"> 要素3: 指定日時に表示されますが、終了タイミングはありません</div><div class="dateTimeSwitching js-date-time-switching" style="display: none;"> 要素4: 常に表示されます</div>要素1: 2024-09-18T12:00:00 から 2024-09-20T12:00:00 まで表示。
要素2: data-hide に無効な日付が設定されているため表示されません。
要素3: 2024-09-21T09:00:00 以降、非表示になるタイミングがなく永続的に表示。
要素4: 常に表示される。
動作しないときに確認すること
data-show・data-hideで指定する日付文字列について
YYYY-MM-DD HH:MM:SSのような一般的な日付と時刻の表記形式で記述すると、一部ブラウザ（古いバージョンのSafari等）で日付と認識されない場合があります。
日付文字列が原因で動作しない場合、ISO 8601という国際標準の日時表記形式（YYYY-MM-DDTHH:MM:SS）に基づいて記述してみてください。
ISO 8601では、日付と時刻の間にTを入れることで、日付と時刻が一緒に書かれているということを示しています。
まとめ
本記事では、JavaScriptを使って指定した日時でHTML要素の表示・非表示を切り替える方法について解説しました。
カスタム属性（data-show、data-hide）を活用することで、HTML上で管理しやすく、手軽に期間限定コンテンツやキャンペーン表示の実装が可能になります。
また、日付フォーマットの注意点や実際のサンプルコードも紹介しましたので、要件に合わせてそのままコピペしてご利用いただけます。
JavaScriptの更新のみでバナーの表示の切り替えを行う方法は以下の記事で紹介しています。
-
【JavaScript】期間を指定してバナーの切り替え・表示・非表示を制御する方法
もくじJavaScriptファイルの更新のみでバナーの切り替え・表示・非表示を制御実装コード使用方法１．バナーを表示させたいページにHTMLコンテナを設置する２．バナーを表示させたいページにCSSを追 ...