前回までに、jQueryプラグインの作り方と、カウントダウンのプラグインを作成した
今回は、前回作ったカウントダウンプラグインをちょっと改造してみる
具体的には、ページ内の複数のドキュメント要素に対して、それぞれ異なるカウントダウンを可能な様に変更する
主に変更するのは、下記
１．グローバル変数として、Arrayを定義
２．定義したArray中に、カウントダウンに必要な値を入れておく
・どの要素中の何番目の子要素であるか
・それぞれの要素の残りの時間
まぁ、こんな感じ
[code class=”js”]
(function($){
var func_cnt = 0;
var interval_func = {};
var diff_time = {};
var setting_array = {};
var interval_array = {};
$.fn.my_countdown = function(options){
setting_array[func_cnt] = {};
interval_array[func_cnt] = {};
var this_element = this;
setting_array[func_cnt][‘element’] = this_element;
//初期値の設定
var default_settings = {
start : ”,
end : ”,
target : this_element,
interval: 1000,
multiple: true,
countdown_end: function(){
return;
}
}
//ユーザ設定がある場合、デフォルト値にマージする
var settings = $.extend(true, default_settings, options);
var s = settings.start;
s = settings.start = (s) ? new Date(String(s)) : new Date();
//startが指定されている場合で、endが指定されていない場合は、startの日の23:59:59までカウントダウン
if(!settings.end){
var tm = s.getMonth()+1;
if(tm<10) tm = ‘0’+tm;
var td = s.getDate();
if(td<10) td = ‘0’+td;
var t_ymd = s.getFullYear()+’/’+tm+’/’+td;
var end = t_ymd +’ ‘+’23:59:59’;;
settings.end = end;//new Date(String(end));
}
//複数のセレクタに対応するため、配列としてsettingsを持っておく
setting_array[func_cnt][‘settings’] = settings;
//カウントダウンを行うターゲット要素の取得
var target_element = setting_array[func_cnt][‘settings’].target;
var t = this_element.get()[0];
var length = this_element.children().length;
//カウントダウンが終了したときの関数
var end_countdown_func = settings.countdown_end;
//カウントダウン用の設定
diff_time[func_cnt] = new Array(length);
interval_func[func_cnt] = new Array(length);
interval_func[func_cnt][‘length’] = length;
//インターバルの設定
interval = setting_array[func_cnt][‘settings’].interval;
multiple = setting_array[func_cnt][‘settings’].multiple;
var n =func_cnt;
if(multiple){
$.each(this_element.children(), function(i){
i = i+1;
//target elementが空であれば、必要なエレメントを補う
var cn = ‘:nth-child(‘+i+’)’;
var this_child = this_element.children(cn);
var this_target = this_child.find(target_element);
if(this_target.children().length == 0){
var input_target_child = ‘残り<span id="date" >–</span>日<span id="hour" >–</span>時間<span id="min" >–</span>分<span id="sec" >–</span>秒<span id="msec">–</span>’;
this_target.append(input_target_child);
}
//「YYYY/MM/DD HH:ii:ss」の形で指定されていた場合そのまま、
//違う場合は、その要素を探しにいく
var end_date = settings.end;
//if(!end_date.match(/^＼d{4}＼/＼d{2}＼/＼d{2}＼s＼d{2}＼:＼d{2}＼:＼d{2}$/)){
if(!end_date.match(/^¥d{4}¥/¥d{2}¥/¥d{2}¥s¥d{2}¥:¥d{2}¥:¥d{2}$/)){
end_date = $(this).find(end_date).text();
}
var end = new Date(String(end_date));
end = Date.parse(end);
start = Date.parse(settings.start);
diff_time[n][i] = end – start;
interval_array[n][i] = setTimeout(function(){
setInterval(function(){
if(diff_time[n][i]){
diff_time[n][i] = diff_time[n][i] – interval;
gd_countdown(diff_time[n][i], i, n, multiple);
}
},interval);
},0);
});
}else{
var i=1;
var end_date = settings.end;
//utf-8ファイルでの検索用
if(!end_date.match(/^\d{4}\/\d{2}\/\d{2}\s\d{2}\:\d{2}\:\d{2}$/)){
//sjisファイルでのの検索用
//if(!end_date.match(/^¥d{4}¥/¥d{2}¥/¥d{2}¥s¥d{2}¥:¥d{2}¥:¥d{2}$/)){
end_date = $(this).find(end_date).text();
}
var end = new Date(String(end_date));
end = Date.parse(end);
start = Date.parse(settings.start);
diff_time[n][i] = end – start;
interval_array[n][i] = setTimeout(function(){
setInterval(function(){
if(diff_time[n][i]){
diff_time[n][i] = diff_time[n][i] – interval;
gd_countdown(diff_time[n][i], i, n, multiple);
}
},interval);
},0);
}
func_cnt++;
return this;
};
//カウントダウン用
function gd_countdown(diff_time, i, n, multiple){
/* diff_time: 終わり時間 – 始まりの時間
* i: 要素の番号（ex. ulタグで囲まれているliで、現在処理しているliのindex番号
* n: カウントを行っている要素セット自体の番号
* ex. 2つの別々のul要素に、カウントダウンメソッドを適応させた場合、0〜1の値が返る。
*/
//残り日数
rdate = Math.floor(diff_time/(24*60*60*1000));
//残り時間の計算
var r = diff_time%(24*60*60*1000);
//残り時間（hour）
var rhour = Math.floor(r / (60*60*1000));
//残り時間(min)
var rmin = Math.floor(r/(60*1000))%60;
//残り時間(sec)
var rsec = Math.floor(r/1000)%60%60;
//残り時間(msec)
var rmsec = Math.floor(r/10)%100;
//カウントが10以下の場合2桁にする
if(0<rdate && rdate < 10) rdate = ‘0’+rdate;
if(0<rhour && rhour < 10) rhour = ‘0’+rhour;
if(0<rmin && rmin < 10) rmin = ‘0’+rmin;
if(0<rsec && rsec < 10) rsec = ‘0’+rsec;
if(0<rmsec && rmsec < 10) rmsec = ‘0’+rmsec;
//カウントが0の場合、00にする
if(rdate <= 0) rdate = ’00’;
if(rhour <= 0) rhour = ’00’;
if(rmin <= 0) rmin = ’00’;
if(rsec <= 0) rsec = ’00’;
if(rmsec <= 0) rmsec = ’00’;
if(multiple){
var this_element = setting_array[n][‘element’];
var cn = ‘:nth-child(‘+i+’)’;
var this_child = this_element.children(cn);
}else{
var this_element = setting_array[n][‘element’];
var this_child = this_element;
}
$(this_child).find(‘span[id=date]’).text(rdate);
$(this_child).find(‘span[id=hour]’).text(rhour);
$(this_child).find(‘span[id=min]’).text(rmin);
$(this_child).find(‘span[id=sec]’).text(rsec);
$(this_child).find(‘span[id=msec]’).text(rmsec);
if(diff_time<=0){
var this_method = gd_countdown;
var this_diff_time = diff_time;
//(end_countdown_func(this_child, this_method ,i, n));
(setting_array[n][‘settings’].countdown_end(this_child, this_method ,i, n, multiple));
}
}
}) (jQuery);
[/code]
