コピペで5分!javascriptで表示時間の期限付きバナーを実装する方法

こんにちは、daimaです。

本日は任意で設定した時刻によって 画像の表示/非表示を切り替えることができる表示期限付きバナーを 数行のjavascriptコードで実現する方法をご紹介します。

主な用途としては、 一度に複数の対象への期限設定が可能であり、 かつ利用方法も非常にシンプルとなっておりますので、 バナーの付け替え作業が頻出する ネットショップの工数削減などに特に力を発揮するかと思います。

デモとソースコード

HTMLコード

  <div class="js-time_limited" data-appear_time="2020/12/25 15:45:00" data-disappear_time="2020/12/28 17:26:00">
    <img src="{画像URL}" alt="">
  </div>

まずはHTMLコードです。

ここでのポイントはdiv要素に指定されている 「js-time_limited」クラスと、 「data-time_limit=”2020/12/25 12:00:00″」 「data-disappear_time=”2020/12/26 00:00:00″」の二つの属性値です。

前者のクラスは時限処理の対象にする要素の目印ですので、 処理を行いたい全ての要素に付与してください。

後者の二つのデータ属性は、 それぞれ対象を表示する開始と 終わりの期限を設定する役割を持ちます。

サンプルの例ですと、 2020年12月25日の正午0時から 日付が変わる瞬間の2020年12月26日0時丁度までの間のみ、 imgタグに設定したURLの画像が表示されるというわけですね。

CSSコード

    .js-time_limited{
      display: none;
    }
    .js-time_limited_fire{
      display: block;
    }

要素の表示/非表示は CSSでコントロールします。

CSSの内容を書き換えることで 表示表示以外にも要素の背景画像の変更や 文字のスタイリングなどいろいろな応用が可能ですので 知識のある方はぜひトライしてみてください。

javascriptコード

  var myClass = document.getElementsByClassName("js-time_limited");
  for (var i = 0; i < myClass.length; i++){
      var appearTime = myClass[i].getAttribute("data-appear_time");
      var disappearTime = myClass[i].getAttribute("data-disappear_time");
      var threshould_start = Date.parse(appearTime);
      var threshould_end = Date.parse(disappearTime);
      var current = new Date();
      if (threshould_start < current && threshould_end > current) {
        myClass[i].classList.add("js-time_limited_fire");
      } else {  // 同じ時間、もしくはそれ以前ならば
        myClass[i].classList.remove("js-time_limited_fire");
      }
  }

javascriptコードです。

現在時刻とdata属性の時刻設定を比較し、 設定した表示期限時刻内であれば 対象にdisplayをnoneからblockに変更するための js-time_limited_fireクラスをするという処理で 要素の表示/非表示をコントロールしています。

最初はCSSを通さず、javascriptで 直接style属性を変更して表示/非表示を 切り替えていましたが、柔軟性や 更新の利便性を考慮した結果今の仕様に落ち着きました。

  $(".js-time_limited").each(function(){
    var appearTime = $(this).data("appear_time");
    var disappearTime = $(this).data("disappear_time");
    var threshould_start = Date.parse(appearTime);
    var threshould_end = Date.parse(disappearTime);
    // 現在の日時をもつDateオブジェクトを作成
    var current = new Date();
    if (threshould_start < current && threshould_end > current) {
      $(this).addClass("js-time_limited_fire");
    } else {  // 同じ時間、もしくはそれ以前ならば
      $(this).removeClass("js-time_limited_fire");
    }
  });

あまり大きな差はありませんが コードの見た目が多少すっきりしている jQuery版もご用意してみました。 (処理内容は同一です)

jQueryが利用可能な環境下であれば こちらを利用してください。

おわりに

このスクリプトはもともと、 ネットショップを運営しているお客様から 毎回バナーの付け外しが面倒なので 自動でバナーを非表示にする方法がないかという ご相談を受けたことがきっかけで書いたものでした。

自分も面倒くさがりな方なのでよくわかるのですが、 そういう面倒な作業はできるだけプログラムに任せて 人間側はもっと人間にしかできない仕事に集中したいものですね。