Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

ソースと使い方

ソースです。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のソースを覗かれたら丸見え!!
dribble13
妻と娘と“限定”の文字と朝に弱いRuby, PHP, Perl, Java, Javascriptが喋れる流浪のプログラマ。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away