【JavaScript】現在日時をリアルタイムで表示し続ける方法

JavaScriptのnew Date()を使用して現在日時を取得し、毎秒リアルタイムで表示する方法を解説します。

完成系は以下のイメージです。

See the Pen js_show_date_2 by Usagi (@naniwa_usagi) on CodePen.

現在日時を取得・表示する方法

現在日時を取得・表示する方法についてはこちらの記事で解説していますので参考にしてみてください。

今回は完成系のコードのみ紹介します。

: 【JavaScript】現在日時を取得して表示する方法【初心者向け】
JavaScriptで現在日時を取得・表示する方法について解説

現在日時を取得・表示する処理の完成系はこちらです。

JavaScriptのnew Date()で取得した現在時刻をフォーマットしてyyyy/MM/dd/ HH:mm:ss形式で表示しています。

HTML

<div id="now"></div>

JavaScript

var date = new Date();
var y = date.getFullYear();
var m = ('0' + (date.getMonth() + 1)).slice(-2);
var d = ('0' +　date.getDate()).slice(-2);
var h = ('0' +　date.getHours()).slice(-2);
var min = ('0' + date.getMinutes()).slice(-2);
var s = ('0' + date.getSeconds()).slice(-2);
var now = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
document.getElementById('now').innerHTML = now;

現在日時をリアルタイムで表示し続ける方法

先ほど解説した方法ではページ描画時の日時を表示することはできますが、処理が1回しか呼ばれないためリアルタイムな時刻を表示し続けることはできません。

リアルタイムで表示するには先ほどの処理を関数化して、1秒ごとに処理を呼ぶようにします。

現在日時の取得・表示処理を関数化する

まずは現在日時の取得・表示処理をまるっと関数化します。

関数化はfunctionでも以下のようにアロー関数でも、どちらでも問題ないです。

JavaScript

// 現在日時を取得・表示する
const setDateTime = () => {
  var date = new Date();
  var y = date.getFullYear();
  var m = ('0' + (date.getMonth() + 1)).slice(-2);
  var d = ('0' +　date.getDate()).slice(-2);
  var h = ('0' +　date.getHours()).slice(-2);
  var min = ('0' + date.getMinutes()).slice(-2);
  var s = ('0' + date.getSeconds()).slice(-2);
  var now = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
  document.getElementById('now').innerHTML = now;
}

関数を1秒ごとに呼び出す

関数を定期的に実行するためにはsetIntervalメソッドを使用します。

基本形は以下の通り。第一引数で指定した関数を第二引数で指定したミリ秒ごとに実行します。

JavaScript

setInterval('関数名()', ミリ秒);

今回はsetDateTime関数を1秒ごとに実行したいので、第一引数にsetDateTimeを、第二引数に1000を指定します。

JavaScript

// 関数を1秒ごとに実行
setInterval(
  'setDateTime()',
  1000
);

これで、現在日時をリアルタイムで毎秒表示し続ける処理の完成です。

以下、完成系のコードです。

HTML

<div>現在日時は</div>
<div id="now"></div>
<div>です。</div>

JavaScript

// 現在日時を取得・表示する
const setDateTime = () => {
  var date = new Date();
  var y = date.getFullYear();
  var m = ('0' + (date.getMonth() + 1)).slice(-2);
  var d = ('0' +　date.getDate()).slice(-2);
  var h = ('0' +　date.getHours()).slice(-2);
  var min = ('0' + date.getMinutes()).slice(-2);
  var s = ('0' + date.getSeconds()).slice(-2);
  var now = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
  document.getElementById('now').innerHTML = now;
}

// 関数を1秒ごとに実行
setInterval(
  'setDateTime()',
  1000
);

まとめ

現在日時をリアルタイムで表示し続ける方法について解説しました。

setIntervalメソッドはログインアカウントのセッションを確認したりといった、定期的な処理実行が必要な場面でよく使われますので是非使い方をマスターしてみてください。

今回は以上です。