テレビ朝日メディアプレックス

BLOGブログ

javascriptで現在時刻の本当のリアルタイム表示

どうも、スズキです。
javascriptで現在時刻に基づいてリアルタイム表示することってたまにありますよね。

Webでサンプルコード探すと大体が以下のようにDateオブジェクトを取得して各情報を出力する関数を1秒毎のsetIntervalで更新する方法ですが、

function showClock() {
  var dd = new Date();
  var text = dd.getFullYear() + "年";
  text += (dd.getMonth() + 1) + "月";
  text += dd.getDate() + "日";
  text += " ";
  text += dd.getHours() + "時";
  text += dd.getMinutes() + "分";
  text += dd.getSeconds() + "秒";
  document.getElementById("nowtime1").innerHTML = text;
}

showClock();  // まずは初期表示

setInterval(showClock, 1000);

実際、動いているのが以下になります。

 

OS標準の時計と見比べてください。
秒の動きにズレがありますよね。(なかったら1/1000で運がいい方です笑)

 

そうです、上記プログラムだと最大で999msのズレが発生することになりますね。
これを解消するためには、秒の動きに合わせてsetIntevalを開始する必要があります。
そのコードが以下になります。

function showClock2() {
  var dd = new Date();
  var text = dd.getFullYear() + "年";
  text += (dd.getMonth() + 1) + "月";
  text += dd.getDate() + "日";
  text += " ";
  text += dd.getHours() + "時";
  text += dd.getMinutes() + "分";
  text += dd.getSeconds() + "秒";
  document.getElementById("nowtime2").innerHTML = text;
}

showClock2();  // まずは初期表示

setTimeout(function () {

  showClock2();  // 最初のジャスト1秒表示
  setInterval(showClock2, 1000); // 以降のジャスト1秒表示
}, 1000 - (new Date()).getUTCMilliseconds());

このコードの結果が以下になります。

 


OSの時計と見比べてもズレがないことがわかります。

 

realtime-clock

 

setIntervalは基本的には信頼出来るものですが、長く表示させる場合途中で補正処理を入れてもいいかもしれません。

現場からは以上です。

関連する記事