サイトの新着情報でNEWの表記をすると更新項目が解りやすくなりますが、いつまでも表示すると可笑しいので一定期間後に削除が必要です。
只、気をつけていないと削除抜かりなんて事もありますので、jQueryを使って指定した更新日から一定期間だけ表示されるようにしてみました。
スクリプトとサンプル
ＨＴＭＬの記述
指定日となる更新日は、○○○○年○○月○○日と指定します。※数字部分は半角。
<dl id="days"> <dt>2013年04月01日</dt> <dd><a href="#">○○○○ページを更新しました。</a></dd> <dt>2013年03月08日</dt> <dd><a href="#">○○○○ページを更新しました。</a></dd> <dt>2013年03月05日</dt> <dd><a href="#">○○○○ページを更新しました。</a></dd> <dt>2013年03月01日</dt> <dd><a href="#">○○○○ページを更新しました。</a></dd> </dl>
jQueryの記述
※IE8対応のため一部変更、13/4/16
$(function(){
var after = 20;
after = after*24*60*60*1000;
now = new Date();
var lists = $("#days dt");
lists.each(function() {
var times = $(this).text().replace(/^(\d+)年(\d+)月(\d+)日$/,"$1,$2,$3");
times = times.split(",");
var settime = new Date(times[0],times[1]-1,times[2]);
end = new Date(settime.getTime()+after);
if(now < end) {
$('+dd',this).append("<span>NEW</span>");
}
});
});
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。
スクリプトの処理内容
/*掲載期限を20日で指定*/
var after = 20;
/*afterをミリ秒に変換*/
after = after*24*60*60*1000;
/*現在の日時を取得*/
now = new Date();
/*更新日の要素 #days dt を 変数lists に代入*/
var lists = $("#days dt");
/*
each() で繰り返し処理 を行う
$(セレクター).each(function() { 繰り返し処理 }
*/
lists.each(function() {
/*
dt要素のテキストをreplace()で正規表現を使って置換し、変数 times に代入
*/
var times = $(this).text().replace(/^(\d+)年(\d+)月(\d+)日$/,"$1,$2,$3");
/*
IE8だと、変数timesを new Date(）に入れても上手く動かないため
timesをsplitで分割します
*/
times = times.split(",");
/*
timesを配列で取出して new Date で日付オブジェクトに変換。
*/
var settime = new Date(times[0],times[1]-1,times[2]);
/*settime をミリ秒形式に変換後 after を+して日付オブジェクトに変換。*/
end = new Date(settime.getTime()+after);
/*条件式：nowよりendが大きい場合｛｝内の処理を行う*/
if(now < end) {
/*dt要素の隣接要素の最後に<span>NEW</span>を追加*/
$('+dd',this).append("<span>NEW</span>");
}
補足
対応ブラウザについて
IE8～IE10、Firefox 20.0.1、Safari 5.1.7 Chrome で動作確認をしています。
IE10のブラウザモード切替で試した所、IE7は駄目っぽいです。
更新日を記号で区切る場合
更新日を年月日ではなく記号で区切るなら下記記述部分は、
（例）日付が 2013-04-20 と指定の場合
var times = $(this).text().replace(/^(\d+)-(\d+)-(\d+)$/,"$1,$2,$3");
times = times.split(",");
var settime = new Date(times[0],times[1]-1,times[2]);
↑でも良いですが、dt要素のテキストをsplit()で分割すると見た目が少しスッキリします。
※timer = times.split(“,”); は不要になります
var times = $(this).text().split("-");
var settime = new Date(times[0],times[1]-1,times[2]);