JavaScriptで特定の期間のみ要素を表示する方法

MARKLEAPS

2025.02.21

JavaScript を使用して、特定の期間のみ要素を表示する方法を紹介します。
例えば、「2025年3月1日 10:00 ～ 2025年3月31日 23:59」の間だけ特定のバナーを表示することができます。

基本の実装

事前に CSS で display: none; を設定し、JavaScript で日時判定後に display: block; に変更することで、指定した期間のみ要素を表示できます。

<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>

<div id="campaign_bnr">2025年2月1日 10:00:00 ～ 2025年2月28日23:59:59 まで表示するキャンペーン内容</div>

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>

#campaign_bnr {
  display: none;
}

#campaign_bnr {

display: none;

}

解説

① Dateオブジェクトを使った時間管理

    const startTime = new Date("2025-03-01T10:00:00").getTime();
    const endTime = new Date("2025-03-31T23:59:59").getTime();
    const now = Date.now();

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”) を使用することで、指定した日時の timestamp（ミリ秒）を取得できます。
・Date.now() は現在時刻をミリ秒単位で取得する最も簡潔な方法です。

② setInterval を使ったリアルタイム更新

setInterval(updateVisibility, 1000);

1	setInterval(updateVisibility, 1000);

・1秒ごとに現在時刻をチェックし、要素の表示・非表示を動的に更新します。
・ページの読み込み時だけでなく、期間に入った瞬間にバナーが表示されるようになります。

・動作デモ

See the Pen
特定の期間だけ、要素を表示する by mkl may (@mkl-may)
on CodePen.

応用例

カウントダウン付きの期間限定表示

開始前: 「キャンペーン開始まであと〇〇日」と表示
開催中: 「キャンペーン終了まであと〇〇日」と表示し、要素を表示
終了後: 「キャンペーンは終了しました」と表示し、要素を非表示

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);
};

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);

};

<div id="campaign_bnr">
  <h2>期間限定キャンペーン</h2>
  <p id="countdown"></p>
</div>

<h2>期間限定キャンペーン</h2>

</div>

#campaign_bnr {
	display: none;
}

#campaign_bnr {

display: none;

}

・動作デモ

See the Pen
[JavaScript] カウントダウン付きの期間限定表示 by mkl may (@mkl-may)
on CodePen.

よく読まれている関連記事

数字をカウントアップするjQueryプラグイン「jquery.counterup」

JavaScriptで特定の期間のみ要素を表示する方法

基本の実装

応用例

カウントダウン付きの期間限定表示

よく読まれている関連記事

数字をカウントアップするjQueryプラグイン「jquery.counterup」

関連最新記事

JavaScriptで特定の曜日のみ要素を表示する方法

初回アクセス時のみモーダルを表示

期間限定でコンテンツの表示/非表示を切り替えるjQuery

数字をカウントアップするjQueryプラグイン「jquery.counterup」

社内風景

社内風景2