日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利 - 自動化厨のプログラミングメモブログ │ CODE:LIFE

今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。

http://qiita.com/dribble13/items/3eb39726aba33add6c0aqiita.com

これがすごく便利！

このscriptでできること

指定した日時になったら要素を表示する
指定した日時になったら要素を非表示にする
指定した期間だけ要素を表示する

このscriptの利点

jQueryなので記述が簡単に済む
日時指定が要素のタグ内に記述できるので管理が簡単

導入方法

1.jQueryライブラリを読み込む

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>

を <head>~</head>内に記述。

2.下記scriptを記述もしくは読み込む

直接html内に記述する場合は

<script>
$(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();
    }
  });
});
</script>

をに記述

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

を view_timer.jsなどの名前で保存。

html内に<script src="js/view_timer.js"></script>として読み込む。

3.表示/非表示を切り替えたい要素をspanで囲んで日時指定

指定方法は3パターン

記入例

指定した時間まで表示する（2/15 0:00 から非表示にする）

<span class="view_timer" data-end-date="2016/2/15 0:00"></span>

指定した時間までは非表示（2/15 0:00 から表示する）

<span class="view_timer" data-start-date="2016/2/15 0:00"></span>

指定した期間だけ表示する（2/15 0:00 ～ 2/16 0:00 の間だけ表示する）

<span class="view_timer" data-start-date="2016/2/15 0:00" data-end-date="2016/2/16 0:00"></span>

以上で設定は完了。これで時限式に要素の表示と非表示を切り替えることができます。

しかもタグに個別で直接設定できるため複数のタイマーの管理が分かりやすい。

あとがき

今後のセールページ製作には欠かせないscriptになりそうです。

タイムセールに使ったり、休みの日の自動更新につかったり、まぁscriptである以上はRMSのページなんかでは使えないんですけどね。