カウントダウンJavascript(使い回し仕様)

フロントエンド(HTML/CSS/JavaScript)

カウントダウンを作っていて思うことがあった。
・日時が違うもの毎に1個1個作るというのが納得いかない。
・『年月日』指定するものもあれば、『時間』まで指定するものもある。
・『残り日数』以外にも『残り時間』を表示したい場合もある。
・24時間を切ったとき、残『0』日となるので、その場合は『残り時間』を表示したい。
そこで使い回し用を作ってみた。

※wordpressの記事内で使う場合、途中で空列を作らないこと!自動的に<p>~</p>が追加されちゃうから…

var CountDown = function(ymdHis,flag){
today = new Date();
target = new Date(ymdHis);
diff = target.getTime() - today.getTime();
days = Math.ceil( diff/(24*60*60*1000) );
times = Math.ceil( diff/(60*60*1000) );
if(days <= 1){ // last 1 days
flag = "time";
if(times < 0) // time up
return false;
}
// 表示形式
if(!flag)
return days+"日";
if(flag=="time")
return times+"時間";
else if(flag=="day_time")
return days+"日("+times+"時間)";
else if(flag=="day_and_time")
return (days-1)+"日"+(times-((days-1)*24))+"時間";
return days+"日";
};

変数に入れることも考えて、値を返すだけ。
期日を通り過ぎていたら『false』を返します。
すぐ表示させたい場合は『document.write()』のなかに指定する。
指定方法として
『ymdHis』は『YYYY/mm/dd HH:ii:ss』または『YYYY/mm/dd』
『flag』は、『time』残り時間、『day_time』残り日数(残り時間)
その他は全て『残り日数』という表示になる。
※残り0日または1日の場合、残り時間を表示する
flagを指定してもしなくてもどちらでもいいので、以下のような形になる。
というように表示される。
因みにコチラ、ajax仕様に非ず。
別にそこまで細かく出さなくてもいいかな、と思ったもんだから…。

コメント

タイトルとURLをコピーしました