「NEW！」表示をさせるスクリプト

javascript

ようやく仕事が一段落。
MTがらみの仕事の中で、色々javascriptを書いたので、
晒すことに。

/* new表示制御
 ---------------------------------------------------------------- */
addLoadEvent(new_ck);
function new_ck(){
	var isMSIE = /*@cc_on!@*/false; 
	var new_img = $('img[@class^=newck]').get();
	for(var i=0,L=new_img.length;i<L;i++){
		if(isMSIE) {
			var ck_date = new_img[i].getAttribute('className').substr(5,10);
		}else{
			var ck_date = new_img[i].getAttribute('class').substr(5,10);
		}
		var date_ar = ck_date.split('_');
		var n_date = new Date(date_ar[0],date_ar[1],date_ar[2]);
		n_date = n_date.getTime();
		var today = new Date();
		today = new Date(today.getFullYear(),today.getMonth() + 1,today.getDate());
		today = today.getTime();
		if((today - n_date)<=1209600000){
			new_img[i].style.display = 'inline';
		};
	}

}

組み込み方としては「new」のimgタグに「newck2008_08_10」というclassを入れればOKです。
あと、「new」のimgはCSSでdisplay:noneとしておく必要があります。
「2008_08_10」の部分はnew表示・非表示のチェックをする日時なので、可変です。
上のソースでは、class名に設定された日時と、今日の日付の差が14日以下であればnew表示。
14日より離れていれば非表示にさせています。

なんとなく解説

var isMSIE = /*@cc_on!@*/false;

最初の行で謎の変数を定義してますが、IEを判別するためのものです。
http://phpspot.org/blog/archives/2007/04/javascriptie1.html
こちらを参考に。

var new_img = $('img[@class^=newck]').get();

実はここだけjquery使ってます。
class名が「newck」で始まる要素を取ってきて、get()でDOM要素を配列に入れる、という
処理をさせています。つまり、「new」表示をさせるかどうかチェックするimgタグを全て取得。

if(isMSIE) {
	var ck_date = new_img[i].getAttribute('className').substr(5,10);
}else{
	var ck_date = new_img[i].getAttribute('class').substr(5,10);
}

IEとその他ブラウザでclassの扱いが違うので、頭の部分で定義した変数を使って
処理を分けています。class名の６文字目以降の10文字を取得させています。
要するに「newck2008_08_10」の「2008_08_10」。

var date_ar = ck_date.split('_');

取得した文字を「_」で切り分け。

var n_date = new Date(date_ar[0],date_ar[1],date_ar[2]);
n_date = n_date.getTime();

class名から取得した日時を使って、Dateオブジェクトを作成。
で、作成したオブジェクトを今日の日付と比較するためにミリ秒に変換。

var today = new Date();
today = new Date(today.getFullYear(),today.getMonth() + 1,today.getDate());
today = today.getTime();

今日の日付を作成し、これまたミリ秒に変換。

if((today - n_date)<=1209600000){
	new_img[i].style.display = 'inline';
};

class名から取得した日付と、今日の日付を比較して14日以下であれば
CSSでdisplayをinlineにする。


あんまり綺麗なソースとは言えないですが、とりあえず晒しあげ。


今日のお疲れ！ＢＧＭ♪
BE MY WIFE／BEAT CRUSADERS