某所より要望があったので作りました。

ソースと使い方

ソースです。jQueryは別途用意してください。

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

htmlではこんな感じで要素に対してclassとdata-start-date, data-end-date属性を設定すると

<span class="view_timer" data-start-date="2013/9/24 10:00" data-end-date="2013/9/30 21:00">HogeHogeFugaFuga</span>

data-start-date〜data-end-dateの期間だけ表示されるようになります。
上記の例だと2013年9月24日 AM10時〜2013年9月30日 PM9時まで表示されるようになります。

<span class="view_timer" data-start-date="2013/9/24 10:00">テスト</span>

上記のようにdata-start-dateだけ指定するとdata-start-dateで指定された日時から無期限に表示されるようになります。

また、反対に下記のようにdata-end-dateだけ指定すると

<span class="view_timer" data-end-date="2013/9/30 21:00">お試し</span>

単純にdata-end-dateで指定された日時以降は表示しないようになります。

長所

jQueryだけで実装してるので静的なHTMLでも使える!

短所

HTMLのソースを覗かれたら丸見え!!