Java Scriptで日付、時間を表示する方法

プログラミング

2022.03.01 2021.05.19

Java scriptで日付、時間を表示させる方法

Javascriptを使用してHTMLに組み込んで日付、時間を表示させる方法を勉強したので記事を書きます。WEBサイトやゲームで必要になるかと思います。

<!DOCTYPE html>
<html lang=ja dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>time</title>
  </head>
  <body>
    <div class="time">
      00:00:00
    </div>
    <div class="day">
      0000/00/00
    </div>
    <script type="text/javascript">
      setInterval(function(){
        const today = new Date()
        const year = today.getFullYear()
        const month = today.getMonth()+1
        const date = today.getDate()
        const hour = today.getHours()
        const minute = today.getMinutes()
        const second = today.getSeconds()
        const time = document.querySelector(".time")
        const day = document.querySelector(".day")
        time.innerHTML = hour + ":" + minute + ":" + second ;
        day.innerHTML = year +"/"+ month +"/"+ date;
      },1000)
    </script>

  </body>
</html>

上の画像にように表示してくれます。
ちなみに2021年5月19日　21時52分41秒のときの画像です。

<div class=”time”>
00:00:00
</div>
<div class=”day”>
0000/00/00
</div>
この部分が表示させるところです。class名がdocument.querySelectorで呼ばれるので必要になります。
HTMLで書かれているのはここまで。下からJavascriptになります。

setInterval(function(){～処理～}，1000)
ここで1000msごとに～処理～を行います。

const today = new Date()
ここで時間、日付を取得します。
Date（yead, month[, day[, hour[, min[, sec[, msec]]]]])のデータが入っています。
Date（2000, 2, 28, 23, 59, 00, 000) -> 2000-3-28 23:59:00:000と出力できます。
Monthは、0～11なので＋1されます。

document.querySelector(“”)でHTMLのクラス名を検索してきてくれる。1つ見つけたら検索終了します。

time.innerHTML = hour + “:” + minute + “:” + second ;
day.innerHTML = year +”/”+ month +”/”+ date;
ここでデータが入力されています。