コピペで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が利用可能な環境下であれば
こちらを利用してください。