今更ながら、CreateJSでカウントダウンを作る
DEMOスクリプトはこちら（custom02.js）
開催日を設定する
- Date(年, 月(月-1), 日, 時, 分, 秒)
- 例えば、2017年10月15日12時30分の場合。
Date(2017, 9, 15, 12, 30, 0)
//開催日・時間
var futuretime = new Date(2017, 9, 15, 12, 30, 0);
数字用の画像を読み込んでbitmapオブジェクトにする
- 0～9の数字文字画像と、日・時・秒用文字画像を読み込む。
//数字用bmp
var nums = [];
for ( var i = 0; i < 10; i++ ) {
var filename = './images/' + i + '.png';
nums[i] = new createjs.Bitmap(filename);
}
//その他文字
var nichi = new createjs.Bitmap('./images/nichi.png');
var koron = new createjs.Bitmap('./images/ten.png');
開催日の日時から現在の日時を引いて、差を出す
- 両方の日時をミリ秒に変換して差を出す。
- diff = futuretime.getTime() - dateobj.getTime();
var dateobj = new Date();//現在の時間
//開催日の時間－現在の時間
var diff = futuretime.getTime() - dateobj.getTime();
求めた差(ミリ秒)を日・時・秒に変換する
- 秒：parseInt( ( diff / 1000 ) % 60 )
- 分：parseInt( ( ( diff / 1000 ) / 60 ) % 60 )
- 時：parseInt( ( ( ( diff / 1000 ) / 60 ) / 60 ) % 24 )
- 日：parseInt( ( ( ( diff / 1000 ) / 60 ) / 60 ) / 24 )
//秒
var second = parseInt( ( diff / 1000 ) % 60 );
//分
var minute = parseInt( ( ( diff / 1000 ) / 60 ) % 60 );
//時
var hour = parseInt( ( ( ( diff / 1000 ) / 60 ) / 60 ) % 24 );
//日
var day = parseInt( ( ( ( diff / 1000 ) / 60 ) / 60 ) / 24 );
数字が1桁のとき、数字の前を0で埋める
var second_str = ('0' + second).slice(-2);
var minute_str = ('0' + minute).slice(-2);
var hour_str = ('0' + hour).slice(-2);
var day_str = ('00' + day).slice(-3);
残り日・時・分・秒を画像数字で表示する
- autoClear = falseにしているので、画像を追加しupdate()したら、すぐにまたremoveする
stage.autoClear = false;
//日、時、分、秒表示オブジェクト
var bmpcontainer = new createjs.Container();
stage.addChild(bmpcontainer);
//数字を数字画像に変換して表示
function show_bmpnums(num, x, offset) {
var dayobj = nums[num];
dayobj.x = 30 * x + offset;
bmpcontainer.addChild(dayobj);
stage.update();
bmpcontainer.removeAllChildren();
}
//日や：画像を表示
function show_othermoji(moji, x, offset) {
moji.x = 30 * x + offset;
bmpcontainer.addChild(moji);
stage.update();
bmpcontainer.removeAllChildren();
}
//画面に画像を並べて表示
function bmpnums(d, h, m, s) {
stage.clear();
//日
show_bmpnums(parseInt(d.substr(0,1)), 0, 0);
show_bmpnums(parseInt(d.substr(1,1)), 1, 0);
show_bmpnums(parseInt(d.substr(2,1)), 2, 0);
show_othermoji(nichi, 3, 0);
//時間
show_bmpnums(parseInt(h.substr(0,1)), 0, 140);
show_bmpnums(parseInt(h.substr(1,1)), 1, 140);
show_othermoji(koron, 2, 140);
//分
show_bmpnums(parseInt(m.substr(0,1)), 0, 240);
show_bmpnums(parseInt(m.substr(1,1)), 1, 240);
show_othermoji(koron, 2, 240);
//秒
show_bmpnums(parseInt(s.substr(0,1)), 0, 340);
show_bmpnums(parseInt(s.substr(1,1)), 1, 340);
}
bmpnums(day_str, hour_str, minute_str, second_str);
プチゲームトップへもどる