経過時間、残り時間をリアルタイムに表示する方法
[参考記事] ゼロ埋めする方法 printfの代替
[参考記事] 時間をHH:ii:ssのフォーマットで表示する方法
このページを表示してからの経過時間 |
残り時間を表示する
サーバで計算された残り時間をPCに表示させる場合、最終の時間はサーバの時計になり、現在時間はPCの時計になります。
このためこの2つの時間がずれていた場合、正しい時間を計算するには差分をとる必要があります。
Date()は引数がないとUNIXIタイムをミリ秒であらわしたものとなります。
渡す値をUNIXタイムではなく、時分秒で渡す場合は
new Date(2011, 11, 31, 23, 59, 59);
このときJavaScriptのDateの月は1引いたものを使用します。
<!-- 表示する領域 --> <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を使用する方法
- 入力フォームでコピペ(コピー&ペースト)を禁止する方法
- 表示、非表示を切り替える方法
スポンサーリンク