javascriptで現在の日時を取得したときの備忘録

現在の日時の取得方法

Dateオブジェクトを使うことで現在の日時を取得することができる

const date = new Date(); //  現在の日時を取得
console.log(date);
// 出力結果：Thu Dec 03 2020 19:58:01 GMT+0900 (日本標準時)

ここからDateオブジェクトに用意されているメソッドを使うことで個々に取得することができる

// 出力結果：2020123木20578(2020年12月3日木曜日20時57分8秒)
<div id="date"></div>

<script>
const date = new Date(); //  現在の日時を取得
const year = date.getFullYear();// 年(4桁)
const month = date.getMonth() + 1;// 月(0–11)
const day = date.getDate();// 日(1–31)
const weeks = ["日","月","火","水","木","金","土"];// 曜日用の配列
const week = weeks[date.getDay()];// 曜日(0-6)
const hour = date.getHours(); // 時(0–23)
const minute  = date.getMinutes(); // 分(0–59)
const second  = date.getSeconds(); // 秒(0–59)
// 出力
const text = "" + year + month + day + week + hour + minute + second;
document.getElementById("date").innerHTML = text;
</script>

「月」と「曜日」だけ少し特殊で0から始まるので注意
変数textで最初に空文字""を入れているのは、数値として計算をするのを防ぐため

メソッドについては以下を参照

おまけ：リアルタイムで動く時計

<div id="date"></div>

<script>
const showClock = () => {
	const date = new Date(); //  現在の日時を取得
	const year = date.getFullYear();// 年(4桁)
	let month = date.getMonth() + 1;// 月(0–11)
	let day = date.getDate();// 日(1–31)
	const weeks = ["日","月","火","水","木","金","土"];// 曜日用の配列
	const week = weeks[date.getDay()];// 曜日(0-6)
	let hour = date.getHours(); // 時(0–23)
	let minute  = date.getMinutes(); // 分(0–59)
	let second  = date.getSeconds(); // 秒(0–59)

	// 桁数が一つの時に先頭に「0」追加
	day = ("00" + day).slice(-2);
	hour = ("00" + hour).slice(-2);
	minute = ("00" + minute).slice(-2);
	second = ("00" + second).slice(-2);

	const text = year + "年" + month + "月" + day + "日" + week + "曜日" + hour + "時" + minute + "分" + second + "秒";
	document.getElementById("date").innerHTML = text;
}
setInterval('showClock()',1000);
</script>

出力用したときに一桁の数字の時に先頭に0を入れるようにして、slice関数で後ろから2文字を切り取ってる
7分の時に「00」を足すと「007」になりslice関数で後ろから2文字切り取ると「07」になる

また、setInterval関数を使って1秒ごとに書き換えてる