27
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ブラウザ側で日時指定で表示・非表示を切り替えるスクリプト

Last updated at Posted at 2013-09-24

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

ソースと使い方

ソースです。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のソースを覗かれたら丸見え!!
27
41
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?