大会・イベント紹介ページ等で見かける開催日までカウントダウンするタイマーの作り方です。
開催日まではカウントダウンを行い。開催期間中は、「開催中です」と表示。期間が過ぎると「終了しました」と表示を変更します。
スクリプトとサンプル
$(function() {
var now = new Date();
var point = new Date(2013,8-1,9);
var endpoint = new Date(2013,8-1,13);
var countdown = Math.ceil((point.getTime() - now.getTime()) / (24*60*60*1000) );
var message = $("#message");
if(countdown > 0) {
message.html("開催まで<span>" + countdown + "</span>日");
} else if((now >= point) && (now < endpoint)) {
message.html("開催中です");
} else if(now > endpoint) {
message.html("終了しました");
}
});
スクリプトの処理内容
//クライアントの今日のローカル日付を変数 now に代入
var now = new Date();
//イベント開始日を変数 point に代入
var point = new Date(2013,8-1,9);
//イベント終了日の翌日を変数 endpoint に代入
var endpoint = new Date(2013,8-1,13);
//変数 point と endpoint をミリ秒形式に変換後減算。
//減算した値を 1日のミリ秒で除算。その結果の値を
//Math.ceil で 値を四捨五入して切り上げを行い
//変数 countdown に代入。
var countdown = Math.ceil((point.getTime() - now.getTime()) / (24*60*60*1000) );
//id #message を 変数 message に格納。
var message = $("#message");
//変数 countdown が 0より大きい時以下のの処理
if(countdown > 0) {
//#message のhtmlを置きかえる
message.html("開催まで<span>" + countdown + "</span>日");
//変数 now が point 以上、endpoint より小さい時以下の処理
} else if((now >= point) && (now < endpoint)) {
//#message のhtmlを置きかえる
message.html("開催中です");
//変数 now が endpoint 以上なら以下の処理
} else if(now > endpoint) {
//#message のhtmlを置きかえる
message.html("終了しました");
}
jQueryを使わずJavaScriptだけで行う場合
微妙に違いますが、処理内容は上と同じです。
window.onload = function() {
var now = new Date();
var point = new Date(2013,8-1,9);
var endpoint = new Date(2013,8-1,13);
var countdown = Math.ceil((point.getTime() - now.getTime()) / (24*60*60*1000) );
var message = document.getElementById("message");
if(countdown > 0) {
message.innerHTML = "開催まで <span>" + countdown + "</span> 日";
} else if((now >= point) && (now < endpoint)) {
message.innerHTML = "開催中です";
} else if(now > endpoint) {
message.innerHTML = "終了しました";
}
}
補足
このやり方だと閲覧者PCの「日付・時刻」がズレている場合、表示する日付もズレて表示されます。これを対応するにはサーバーのローカル日付をPHP等を使って取得します。
※画像は、PCの日付を 2013/3/9 に変更した状態で表示したものです。
上段がJavaScriptで日付を取得したもの、下段がPHPを使って日付を取得したものです。
JavaScriptは、ずらしたPCの日付が表示されますが、PHPは、正確な日付（サーバーのローカル日付）が表示されます。
追記、jQueryでPHPで取得した日付を使う
※IE8対応のため修正2013.5.9
$(function() {
$.get("count01.php", function(data){
var nowtime = data;
var nows = nowtime.split(",");
var now = new Date(nows[0],nows[1]-1,nows[2]);
var point = new Date(2013,8-1,9);
var endpoint = new Date(2013,8-1,13);
var countdown = Math.ceil((point.getTime() - now.getTime()) / (24*60*60*1000) );
var message = $("#message");
if(countdown > 0) {
message.html("開催まで<span>" + countdown + "</span>日");
} else if((now >= point) && (now < endpoint)) {
message.html("開催中です");
} else if(now > endpoint) {
message.html("終了しました");
}
});
});
$.get(“url”, function(data){…}); を使います。
引数 data には url の結果が文字列として格納されます。
split(“,”)で取得した変数 nowtime を分割し、new Date()に配列で入れ直します。
ちなみに、表示するPHP「count01.php」の記述は、こんな感じです。
<?php echo date('Y,n,j');?>
ローカル上で確認するには
xampp等を使ってローカルサーバ上にデータを設置して確認して下さい。