経過時間、残り時間をリアルタイムに表示する方法
[参考記事] ゼロ埋めする方法 printfの代替
[参考記事] 時間をHH:ii:ssのフォーマットで表示する方法
| このページを表示してからの経過時間 |
残り時間を表示する
サーバで計算された残り時間をPCに表示させる場合、最終の時間はサーバの時計になり、現在時間はPCの時計になります。
このためこの２つの時間がずれていた場合、正しい時間を計算するには差分をとる必要があります。
Date()は引数がないとUNIXIタイムをミリ秒であらわしたものとなります。
渡す値をUNIXタイムではなく、時分秒で渡す場合は
new Date(2011, 11, 31, 23, 59, 59);
このときJavaScriptのDateの月は１引いたものを使用します。
<!-- 表示する領域 -->
<div id="area_time"></div>
<script language="JavaScript"><!--
// 時間を整形する
// http://pentan.info/javascript/sample/view_time_format.html
function TimeFormat(time_h,time_m,time_s){
var str = "";
var tmp;
if(time_h < 100){
tmp = "00" + String( time_h );
str += tmp.substr(tmp.length - 2);
}else{
str += String( time_h );
}
str += ":";
tmp = "00" + String( time_m );
str += tmp.substr(tmp.length - 2);
str += ":";
tmp = "00" + String( time_s );
str += tmp.substr(tmp.length - 2);
return str;
}
// サーバの時間とPCの時間との差分を取得する
var time_diff = parseInt((new Date)/1000) - <?php echo time();?>;
// 残り時間を表示する
function TimeRemaining(end_unixtime){
var now_unixtime = parseInt((new Date)/1000) - time_diff;
var tmp = end_unixtime - now_unixtime;
if(tmp < 0){
tmp = 0;
}
var time_h = Math.floor(tmp/3600);
var time_m = Math.floor(tmp/60);
var time_s = tmp - time_m*60 - time_h*3600;
return TimeFormat(time_h,time_m,time_s);
}
// 残り時間をdiv領域に表示する動作を一定間隔で繰り返す
function TimeRemainingView(){
document.getElementById("area_time").innerHTML=TimeRemaining(<?php echo $end_time;?>);
setTimeout("TimeRemainingView()",100);
}
TimeRemainingView();
// --></script>
経過時間を表示する
<!-- 表示する領域 -->
<div id="area_time"></div>
<script language="JavaScript"><!--
// 時間を整形する
// http://pentan.info/javascript/sample/view_time_format.html
function TimeFormat(time_h,time_m,time_s){
var str = "";
var tmp;
if(time_h < 100){
tmp = "00" + String( time_h );
str += tmp.substr(tmp.length - 2);
}else{
str += String( time_h );
}
str += ":";
tmp = "00" + String( time_m );
str += tmp.substr(tmp.length - 2);
str += ":";
tmp = "00" + String( time_s );
str += tmp.substr(tmp.length - 2);
return str;
}
// 表示された時間を取得する
var time_view = parseInt((new Date)/1000);
// 経過時間を表示する
function TimeLapsed(){
var now_unixtime = parseInt((new Date)/1000);
var tmp = now_unixtime - time_view;
var time_h = Math.floor(tmp/3600);
var time_m = Math.floor(tmp/60);
var time_s = tmp - time_m*60 - time_h*3600;
return TimeFormat(time_h,time_m,time_s);
}
// 経過時間をdiv領域に表示する動作を一定間隔で繰り返す
function TimeLapsedView(){
document.getElementById("area_time").innerHTML = TimeLapsed();
setTimeout("TimeLapsedView()",100);
}
TimeLapsedView();
// --></script>
関連記事
- JavaScriptで64bit版か32bit版の判別をする方法
- 時間をHH:ii:ssのフォーマットで表示する方法
- ゼロ埋めする方法 printfの代替
- ページのタイトルを変更する titleタグ
- リンクを別ウインドウで開きながら、元のウインドウのページを遷移させる方法
- 複数のチェックボックスを同時にチェックする 全選択チェックボックス
- Aタグのtarget属性をJavaScriptで指定する方法
- ページを移動するときに警告を出す方法
- IE6でmin-width、max-width、min-height、max-heightを使用する方法
- 入力フォームでコピペ(コピー&ペースト)を禁止する方法
- 表示、非表示を切り替える方法
スポンサーリンク
