![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
JavaScriptを使えば、「特定の期間だけバナーやお知らせを表示する」といった動きを簡単に実装できます。
たとえば「2026年5月1日10:00 ～ 2026年5月31日23:59」の期間中のみ、キャンペーンバナーを表示するといった使い方が可能です。
この記事では、基本的な実装方法からカウントダウン付きの応用例までを、実務で使いやすい形でご紹介します。
基本の実装
まず、HTML側では要素を非表示にしておき、JavaScriptで現在日時を判定して表示を切り替えます。
HTML
|
1 2 3 |
<div id="campaign_bnr"> 2026年5月1日 10:00:00 ～ 2026年5月31日23:59:59 に表示されるキャンペーン </div> |
CSS
|
1 2 3 4 5 6 7 |
#campaign_bnr { display: none; } #campaign_bnr.is-active { display: block; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> document.addEventListener("DOMContentLoaded", () => { const el = document.getElementById("campaign_bnr"); if (!el) return; // タイムゾーン明示（日本時間） const start = new Date("2026-05-01T10:00:00+09:00").getTime(); const end = new Date("2026-05-31T23:59:59+09:00").getTime(); const update = () => { const now = Date.now(); el.classList.toggle("is-active", now >= start && now <= end); }; update(); // 必要な場合のみ更新（基本は1回でOK） if (Date.now() < end) { setInterval(update, 1000); } }); </script> |
デモ
See the Pen [JavaScript] 特定の期間だけ、要素を表示する by mkl may (@mkl-may) on CodePen.
解説
① Dateオブジェクトで日時を判定
|
1 |
const start = new Date("2026-05-01T10:00:00+09:00").getTime(); |
- ISO8601形式で指定すると正確に日時を扱えます
+09:00を付けることで、日本時間として明示できます（重要）Date.now()は現在時刻をミリ秒で取得する最もシンプルな方法です
ポイント
タイムゾーンを省略すると、ユーザー環境によってズレる可能性があります。
② classListで表示制御
|
1 |
el.classList.toggle("is-active", 条件); |
- style直接操作よりも保守性が高い
- CSSで制御できるためデザイン変更に強い
③ setIntervalは必要な場合のみ
|
1 2 3 |
if (Date.now() < end) { setInterval(update, 1000); } |
- 常時実行は不要なケースが多い
- 無駄な処理を減らしてパフォーマンス改善
応用例：カウントダウン付きの期間限定表示
状態に応じてメッセージを切り替える実装です。
- 開始前：「開始まで」
- 開催中：「終了まで」
- 終了後：「終了しました」
HTML
|
1 2 3 4 |
<div id="campaign_bnr"> <h2>期間限定キャンペーン</h2> <p id="countdown"></p> </div> |
CSS
|
1 2 3 4 5 6 7 |
#campaign_bnr { display: none; } #campaign_bnr.is-active { display: block; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
script> document.addEventListener("DOMContentLoaded", () => { const container = document.getElementById("campaign_bnr"); const countdown = document.getElementById("countdown"); if (!container || !countdown) return; const start = new Date("2026-05-01T10:00:00+09:00").getTime(); const end = new Date("2026-05-31T23:59:59+09:00").getTime(); const format = (ms) => { const d = Math.floor(ms / (1000 * 60 * 60 * 24)); const h = Math.floor((ms / (1000 * 60 * 60)) % 24); const m = Math.floor((ms / (1000 * 60)) % 60); const s = Math.floor((ms / 1000) % 60); return `${d}日 ${h}時間 ${m}分 ${s}秒`; }; const update = () => { const now = Date.now(); container.classList.add("is-active"); if (now < start) { countdown.textContent = `開始まで: ${format(start - now)}`; } else if (now <= end) { countdown.textContent = `終了まで: ${format(end - now)}`; } else { countdown.textContent = "キャンペーンは終了しました"; } }; update(); if (Date.now() < end) { setInterval(update, 1000); } }); </script> |
デモ
See the Pen [JavaScript] カウントダウン付きの期間限定表示 by mkl may (@mkl-may) on CodePen.
まとめ
今回ご紹介した方法を使えば、キャンペーン情報や期間限定コンテンツの表示を自動で制御できます。
特に、JavaScriptで日時を判定することで、公開・非公開の切り替えを手動で管理する必要がなくなります。
また、タイムゾーンやパフォーマンスを意識した実装にすることで、より実務でも安心して使える仕組みにできます。
サイトの演出強化や運用効率化に、ぜひ活用してみてください。