JavaScriptでカウントダウン(標準時)

■ 目的
次のように、期限までのカウントダウンをWebページに表示したい。
(↓画像なので動かないけど、実際はリアルタイムでカウントダウンする)

ただし、海外からのアクセスによる時差を考慮した「標準時」を使用したい。
Webページに簡単に埋め込めるシンプルなものがよい。

カウントダウンを行うJavaScriptは、検索すればたくさん見つかるけど、上記の条件を満たすものがすぐに見つからなかったので作ってみた。
役立つようであれば、ご自由にどうぞ。

■ プログラムコード

<head>
<SCRIPT language="JavaScript">
<!--
// 期日設定(標準時で指定) この例では2013年11月12日15時0分0秒(標準時)としている
// Date の2番目の引数で何月か指定するけど、0〜11で指定することに注意
// 1月は0、12月は11になる
var deadline = (new Date(2013, 10, 12, 15, 0, 0)).getTime();

function display() {
	// アクセスしたPCのローカルタイム
	var localTime = (new Date()).getTime();

	// 標準時へ変換
	var gmt = localTime + (new Date()).getTimezoneOffset()*60*1000;

	// 残りの時間を計算
	var leftDays = Math.floor((deadline-gmt)/(24*60*60*1000));
	var leftHours = Math.floor(((deadline-gmt)%(24*60*60*1000))/(60*60*1000));
	var leftMins = Math.floor(((deadline-gmt)%(24*60*60*1000))/(60*1000))%60;
	var leftSecs = Math.floor(((deadline-gmt)%(24*60*60*1000))/1000)%60%60;

	if((deadline - gmt) > 0) { // 期日前の表示
		this.elem = document.getElementById('CDT');
		this.elem.innerHTML = 
		"残り<span class='num'>"+leftDays+"</span>日と" + 
		"<span class='num'>" + leftHours + "</span>時間" + 
		"<span class='num'>" + leftMins + "</span>分"+
		"<span class='num'>" + leftSecs + "</span>秒です";
	} else { // 期日後の表示
		this.elem.innerHTML = "期日を過ぎました";
	}
        
	// 1秒後に再描画
	tid = setTimeout('display()', 1000);
}
// -->
</SCRIPT>
<style type="text/css">
#CDT .num{
 font-size: 26px;
}
</style>
</head>
<body onLoad="display()" onUnload=clearTimeout(tid)>
	<div id="CDT" align="center"><!-- ここのHTML部がJavaScriptで書き換えられる --></div>
</body>

■ 参考
・カウントダウン: http://www.cj-c.com/java_s/java15.htm
・コピペでサクッと導入できるライブラリ非依存のJavascriptカウントダウン: http://plusblog.jp/3719/
・標準時との時差を求める: http://www.pori2.net/js/date/4.html

■ おまけ
UTC協定世界時GMTグリニッジ標準時の違い: http://www.localtime.jp/utc-gmt/




オンラインゲームを支える技術  ??壮大なプレイ空間の舞台裏 (WEB+DB PRESS plus)

オンラインゲームを支える技術  ??壮大なプレイ空間の舞台裏 (WEB+DB PRESS plus)

プログラマの「本懐」 ~アーキテクトという選択

プログラマの「本懐」 ~アーキテクトという選択