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

11836 ワード
HTML 初心者 プログラミング勉強日記 JavaScript HTML テキストリンク

プログラミング勉強日記

2021年1月9日
以前、こちらの記事でJavaScriptでの日付と時刻を取得する方法をまとめた。今回は、現在時刻をリアルタイムで表示し続ける方法を紹介する。

方法

  1. 現在時刻を格納するDateオブジェクトを作成する
  2. 作成したDateオブジェクトから時間・分数・秒数を取り出す
  3. 時計として表示する文字列を作成する
  4. 文字列を時間に書きかえる
  5. 1秒ごとに特定の処理を実行する

1. 現在時刻を格納するDateオブジェクトを作成する方法

　以下のようにnew Date()で現在の日付・時刻する。

var nowDate = new Date();
console.log(nowDate);
コンソール結果
Sun Sep 27 2020 09:22:20 GMT+0900 (日本標準時)

2. 作成したDateオブジェクトから時間・分数・秒数を取り出す方法

let nowTime = new Date(); //  現在日時を得る
let nowHour = nowTime.getHours(); // 時間を抜き出す
let nowMin  = nowTime.getMinutes(); // 分数を抜き出す
let nowSec  = nowTime.getSeconds(); // 秒数を抜き出す

3. 時計として表示する文字列を作成する方法

let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;

4. 文字列を時間に書きかえる方法

document.getElementById("id名").innerHTML = msg;

5. 1秒ごとに特定の処理を実行する方法

　etIntervalメソッドを使う。(詳しくは後日Qiitaに乗せようと思う)

// 第1引数は指定時間後に自動実行される関数
// 第2引数はミリ秒で指定時間を設定する(1000=1秒)
setInterval('関数名',1000);

サンプルコード

　以上を踏まえてできたコードがこちら。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>

  </style>
  <script>
    function showClock() {
      let nowTime = new Date();
      let nowHour = nowTime.getHours();
      let nowMin  = nowTime.getMinutes();
      let nowSec  = nowTime.getSeconds();
      let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
      document.getElementById("realtime").innerHTML = msg;
    }
    setInterval('showClock()',1000);
  </script>
</head>

<body>

  <p id="realtime"></p>

</body>

</html>

実行結果

　23:7:35よりは23:07:35の方が見やすく、デジタル時計としては常に2桁で表示させたい。そのコードを紹介する。

常に2桁で表示するコード
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>

  </style>
  <script>
    function twoDigit(num) {
      let ret;
      if( num < 10 ) 
        ret = "0" + num; 
      else 
        ret = num; 
      return ret;
    }
    function showClock() {
      let nowTime = new Date();
      let nowHour = twoDigit( nowTime.getHours() );
      let nowMin  = twoDigit( nowTime.getMinutes() );
      let nowSec  = twoDigit( nowTime.getSeconds() );
      let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
      document.getElementById("realtime").innerHTML = msg;
    }
    setInterval('showClock()',1000);
  </script>
</head>

<body>

  <p id="realtime"></p>

</body>

</html>

実行結果