経過時間、残り時間をリアルタイムに表示する方法

[参考記事] ゼロ埋めする方法 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>

関連記事

スポンサーリンク

<SELECT> セレクトボックスを作成する

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る