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)
- 作者: 中嶋謙互
- 出版社/メーカー: 技術評論社
- 発売日: 2011/03/24
- メディア: 単行本(ソフトカバー)
- 購入: 33人 クリック: 1,696回
- この商品を含むブログ (57件) を見る
- 作者: 山本啓二
- 出版社/メーカー: 日経BP出版センター
- 発売日: 2004/11/25
- メディア: 単行本(ソフトカバー)
- 購入: 1人 クリック: 21回
- この商品を含むブログ (43件) を見る