JavaScriptで時限バナーを自動表示する方法

ネットショップを管理しているとキャンペーンなどで、この期間・時間だけバナーを表示したいということはありませんか？

著者が仕事でよく言われたのは、日付が変わるタイミングでバナーの上げ下ろしをしたいという事でした。深夜に手作業なんてしたくないということで、バナーの表示を自動化する方法を紹介させていただきます。jQueryも使っていないので、ファイルを追加で読み込む必要もありません。

仕組み

やっていることは単純です。

1. バナーを非表示の状態で設置しておく

   HTMLにはあらかじめバナーを書いておき、初期状態では見えないようにしておきます。

2. JavaScriptで現在時刻を調べる

   ページが読み込まれたタイミングで、いまが指定した期間内かどうかを判定します。

3. 期間内なら表示に切り替える

   条件を満たしていれば非表示を解除します。期間外なら何も起きません。

「時間が来たらバナーを作る」のではなく、「最初から置いてあるものを見えるようにする」というイメージです。

HTMLを用意する

まずはバナー本体です。初期状態で隠しておくために hidden 属性を付けています。

<div id="js-timed-banner" hidden>
  <a href="https://example.com/campaign/">
    <img src="/images/campaign-banner.jpg" width="800" height="400"
         alt="秋の感謝セール 最大50%OFF">
  </a>
</div>

見た目の調整はCSSに書きます。

#js-timed-banner {
  max-width: 800px;
  margin: 0 auto;
}
#js-timed-banner img {
  width: 100%;
  height: auto;
}
/* hidden 属性を確実に効かせるための保険 */
[hidden] {
  display: none !important;
}

JavaScriptで表示を切り替える

開始日時と終了日時を書き換えるだけで使えます。

<script>
  (function () {
    var banner = document.getElementById('js-timed-banner');
    if (!banner) return;

    // 開始日時と終了日時（末尾の +09:00 で日本時間として固定する）
    var start = new Date('2026-09-22T00:00:00+09:00');
    var end   = new Date('2026-09-23T00:00:00+09:00');

    var now = new Date();
    if (now >= start && now < end) {
      banner.hidden = false;
    }
  })();
</script>

</body> の直前など、バナーのHTMLより後ろに置いてください。バナーより先に実行されると getElementById が要素を見つけられません。

日時の書き方について

new Date('2026-09-22T00:00:00+09:00') という書き方をしているのがポイントです。

前者の書き方だと、海外から見ている人や端末のタイムゾーン設定がずれている人には、意図した時刻に切り替わりません。開始時刻を日本時間で揃えたいなら、+09:00 を付けた書き方が確実です。

コピペ用の完成コード

HTMLとJavaScriptをまとめたものです。日時と画像パス、リンク先を書き換えてお使いください。

<div id="js-timed-banner" hidden>
  <a href="https://example.com/campaign/">
    <img src="/images/campaign-banner.jpg" width="800" height="400"
         alt="秋の感謝セール 最大50%OFF">
  </a>
</div>

<style>
  #js-timed-banner { max-width: 800px; margin: 0 auto; }
  #js-timed-banner img { width: 100%; height: auto; }
  [hidden] { display: none !important; }
</style>

<script>
  (function () {
    var banner = document.getElementById('js-timed-banner');
    if (!banner) return;

    var start = new Date('2026-09-22T00:00:00+09:00');
    var end   = new Date('2026-09-23T00:00:00+09:00');

    var now = new Date();
    if (now >= start && now < end) {
      banner.hidden = false;
    }
  })();
</script>

ページを開いたまま日付をまたぐ場合

上のコードは、ページを読み込んだ瞬間に1回だけ判定します。そのため23時59分にページを開いて放置した人の画面では、0時になってもバナーは出てきません。

深夜0時ちょうどに切り替えたい場合や、長時間開かれるページに設置する場合は、定期的に判定し直します。

<script>
  (function () {
    var banner = document.getElementById('js-timed-banner');
    if (!banner) return;

    var start = new Date('2026-09-22T00:00:00+09:00');
    var end   = new Date('2026-09-23T00:00:00+09:00');

    function update() {
      var now = new Date();
      banner.hidden = !(now >= start && now < end);
    }

    update();                  // 読み込み時に1回
    setInterval(update, 1000); // 以降1秒ごとに判定
  })();
</script>

こちらなら終了時刻を過ぎたときに自動で消えてくれます。読み込み時に1回だけの方式だと、開きっぱなしのページにバナーが残り続けてしまうので。

1秒ごとの判定といっても日時を比べるだけなので、負荷はほぼありません。気になるようなら setInterval(update, 30000) くらいに延ばしても、実用上は困らないと思います。

注意点

今回はあくまで一番簡単にできるを目指して作りましたので、少し注意点があります。

デバイスの時計を見ている

new Date() は閲覧者のデバイスの時計を読んでいます。そこまでする人はいないと思いますが、端末の日付を対象の時間にずらすと、期間外でもバナーが表示されてしまいます。

タイムゾーンのズレは先ほどの +09:00 で対処できますが、意図的に時計を変更されるケースまでは防げません。

隠しているだけで、秘密にはできない

このやり方は、HTMLにバナーを置いたうえで見えなくしているだけです。ページのソースを見れば、公開前のキャンペーン内容も画像も読めてしまいます。

JavaScriptが無効だと出ない

初期状態を非表示にしているので、JavaScriptが動かない環境ではバナーは出ません。時限バナーは装飾的な要素であることが多いので実害は少ないですが、重要な告知には向きません。

よくある質問

最後に

実際にネットショップなどで使用するときは、バナー表示のソースコードをインクルード化して複数のファイルに読み込むことが多いかと思います。

業務を進める上でファイルを少なく簡略化することが、運用していく上でとても大事だと感じましたので今回こちらのやり方を紹介させていただきました。深夜に手作業で差し替える必要がなくなるだけでも、だいぶ違います。ぜひ試してみて下さい。

あわせて読みたい

• PHPのincludeで共通パーツを楽々管理
• Javascript入門｜ロードマップに沿ったJavascript解説
• Webコーダーが厳選！現場で本当に使うCSS小技10選