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;
ここでデータが入力されています。
コメント