イベントバナーを自動的に表示・非表示したい時。。。

Jquery

この年末に、元旦に合わせてイベントバナーを掲載して欲しいんだけど。。。
な～んてクライアントから要望があったりなかったり。。。
つか、ありますよね～（笑

そんな時どうしてますか？

① 大みそかの23:30頃からFTPやWP管理画面を開いて待機する。
② 出来ませんの一言。
③ 外注にお願いする。
④ 家のPCなどでその場に合わせて更新する。
⑤ 何かプラグインなんかが無いか一応探す。

正解は、⑤です！

設置は下記のタグで対応可能です。

先ずはお決まりのJqueryを。。。
changeDisplay.jsをheaderやfooterに埋め込んで。。。
※Jquery本体はご自身でご用意ください。

◆指定時間に非表示にしたい時。

<span class="view_timer" data-end-date="2016/12/31 23:58">時間になったら表示されなくなるよ♪</span>

◆指定時間に表示にしたい時。

<span class="view_timer" data-start-date="2016/12/31 23:59">時間になったら表示されるよ♪</span>

◆期間を限定して表示したい時。
例）2017年1月1日午前0時0分～1月3日午後23時59分の間表示しようとするとこんな感じ。

<span class="view_timer" data-start-date="2011/1/1 0:00" data-end-date="2017/1/3 23:59">設定した期間表示されるよ♪</span>

上記のタグで括るだけでOKです！

◆ changeDisplay.js は、コチラからどうぞ。

$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    }
    else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    }
    else {
      $(this).hide();
    }
  });
});

また、コチラのサイトも参考になりました。

みっくん