【javascript】現在の「年月日」「曜日」「時間」を取得して出力まとめ

javascriptで現在の「年月日」「曜日」「時間」を取得して出力する方法の備忘録

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で最初に空文字""を入れているのは、数値として計算をするのを防ぐため。

メソッドについてはこちらを参照

【実際の使用例】リアルタイムで動く時計

上記コードを利用し、リアルタイムで更新される時計を作成してみた。

See the Pen
【javascript】現在の日時を取得する方法 by twotone (@twotone-me)
on CodePen.

以下は、上記デモのソースコード全体。

<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>

.slice(-2)…秒数で「1秒」など1桁の時に「01」と表記を合わせるために文字列結合をして「001」秒の後ろから2番目（先頭）の「0」を切り取って「01」に合わせている。
また、setInterval()を使って1秒ごとに書き換えてる。