![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
JavaScriptで期間限定表示を実装する方法：カウントダウン付きの応用例も紹介
MARKLEAPS
JavaScriptを使えば、「特定の期間だけバナーやお知らせを表示する」といった動きを簡単に実装できます。
たとえば「2025年2月1日10:00 ～ 2025年2月28日23:59」の期間中のみ、キャンペーンバナーを表示するといった使い方が可能です。
この記事では、基本的な実装方法からカウントダウン付きの応用例までをご紹介します。
基本の実装
まず、HTMLに用意した要素に display: none; を設定して非表示にしておき、JavaScriptで現在の日時を判定。
指定した期間内であれば display: block; に切り替えて表示させます。
・HTML + JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="campaign_bnr">2025年2月1日 10:00:00 ～ 2025年2月28日23:59:59 に表示されるキャンペーン</div> <script> window.onload = function () { const targetElement = document.getElementById("campaign_bnr"); if (!targetElement) return; const startTime = new Date("2025-02-01T10:00:00").getTime(); const endTime = new Date("2025-02-28T23:59:59").getTime(); function updateVisibility() { const now = Date.now(); targetElement.style.display = (now >= startTime && now <= endTime) ? "block" : "none"; } updateVisibility(); setInterval(updateVisibility, 1000); // 1秒ごとに判定を更新 }; </script> |
・CSS
|
1 2 3 |
#campaign_bnr { display: none; } |
解説
実装のポイントを2つに分けて説明します。
① Dateオブジェクトで日時を判定
|
1 2 3 |
const startTime = new Date("2025-03-01T10:00:00").getTime(); const endTime = new Date("2025-03-31T23:59:59").getTime(); const now = Date.now(); |
・new Date(“YYYY-MM-DDTHH:MM:SS”) の形式（ISO8601）で指定すれば、正確な日時が取得できます。。
・Date.now() は現在の時刻をミリ秒で返すシンプルな方法です。
② setIntervalでリアルタイム更新
|
1 |
setInterval(updateVisibility, 1000); |
・1秒ごとに現在時刻をチェックし、表示・非表示を自動で切り替えます。
・ページ表示時に条件外でも、期間中になれば自動的に表示されるのがポイントです。
・動作デモ
See the Pen
特定の期間だけ、要素を表示する by mkl may (@mkl-may)
on CodePen.
応用例：カウントダウン付きの期間限定表示
「開始前」「開催中」「終了後」の3つの状態に応じて、表示内容やメッセージを切り替える例です。
開始前：「キャンペーン開始まであと○日」
開催中：「終了まであと○日○時間」
終了後：「キャンペーンは終了しました」
・HTML
|
1 2 3 4 |
<div id="campaign_bnr"> <h2>期間限定キャンペーン</h2> <p id="countdown"></p> </div> |
・CSS
|
1 2 3 |
#campaign_bnr { display: none; } |
・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 39 40 41 42 43 44 |
window.onload = function () { const targetElement = document.getElementById("campaign_bnr"); const countdownElement = document.getElementById("countdown"); if (!targetElement || !countdownElement) return; const startTime = new Date("2025-02-01T10:00:00").getTime(); const endTime = new Date("2025-02-28T23:59:59").getTime(); function updateCountdown() { const now = Date.now(); if (now < startTime) { // 開始前 const timeLeft = startTime - now; const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); countdownElement.innerText = `開始まで: ${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`; targetElement.style.display = "block"; // メッセージを表示 } else if (now >= startTime && now <= endTime) { // 開催中 const timeLeft = endTime - now; const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); countdownElement.innerText = `終了まで: ${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`; targetElement.style.display = "block"; // キャンペーンバナーを表示 } else { // 終了後 countdownElement.innerText = "キャンペーンは終了しました"; targetElement.style.display = "block"; // メッセージを表示するためにブロックにする } } // 初回実行 updateCountdown(); // 1秒ごとに更新 setInterval(updateCountdown, 1000); }; |
・動作デモ
See the Pen
[JavaScript] カウントダウン付きの期間限定表示 by mkl may (@mkl-may)
on CodePen.
おわりに
今回ご紹介した方法を使えば、キャンペーン情報や期間限定コンテンツの表示を自動で制御できます。
リアルタイムで更新されるため、公開・非公開の切り替えを手動で管理する必要がなくなります。
サイトの演出強化や業務効率化に、ぜひ活用してみてください。
