某所より要望があったので作りました。
ソースと使い方
ソースです。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のソースを覗かれたら丸見え!!