どもっ、koyuです。
最近めっきり寒くなって、大通りではイルミネーションも点灯してます。
年の瀬も近くなり、色々なイベント近づいてきた感じがします!!
クリスマスやHappyNewYearのキャンペーンサイトなんかでよくカウントダウンしてますよね?
ということで、今回はそのカウントダウンタイマーを作ってみました。
それではコードを見ていきましょう。
Here We Go!!まず今の時間を取得します
var nowTime= new Date();
次に、カウントダウンの目的日を決めます。
var theDay = new Date(2009,0,1);
以下のように、String型でも指定することが出来ます。その場合は少なくとも月、日、年が含まれている必要があります。
詳しくはヘルプをご参照下さい。
var theDay = new Date("Jun 1 2009" ); var theDay = new Date("1/1/2009" );
以下続きです。
trace(theDay - nowTime)//今の時間から目的日までの時間がミリ秒で返ってきます。 trace(Math.floor((theDay - nowTime)/1000));//秒が返ってきます。 trace(Math.floor((theDay - nowTime)/1000/60));//分が返ってきます。 trace(Math.floor((theDay - nowTime)/1000/60/60));//時間が返ってきます。 trace(Math.floor((theDay - nowTime)/1000/60/60/24));//日数が返ってきます。 var _time:Number = (theDay - nowTime)/1000; var _s:Number = Math.floor(_time) - Math.floor(_time/60)*60; var _m:Number = Math.floor(_time/60) - Math.floor(_time/60/60)*60; var _h:Number = Math.floor(_time/60/60) - Math.floor(_time/60/60/24)*24; var _d:Number = Math.floor(_time/60/60/24); trace(_d+"日"+_h+"時間"+_m+"分"+_s+"秒");
これで目的日までのカウントダウンができます。
上記のスクリプトでは分かりやすいように割る数字を分けて書いていますが、実際は先に計算できるところは計算してしまいましょう。
このままだと一回表示して終わりなのでonEnterFrame等でnowTimeを更新し、秒数も一緒に更新して然るべきタイミングで分、時間、日数を更新しましょう。
日数だけのカウントダウンの場合は後0日とは言わないので
Math.ceil((theDay - today)/1000/60/60/24);
上記のように数字を切り上げて調整します。
如何でしたでしょうか？
これで記念日までのカウントダウンが出来ますね！
