【JavaScript】現在の年月日、時刻、曜日を表示する方法（リアルタイム表示可能）

現在の年月日や時刻、曜日を自動で表示させるにはどうすればいいの？

滅多にありませんが実務で『現在の年月日を自動で表示させて欲しい』という要望があったりします。

今回は年月日、時刻、曜日の表示方法をご紹介します。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

800部突破！※ 4月15日値上げ予定

JavaScriptで現在の年月日、時刻、曜日を表示する方法

今回ご紹介するのは以下になります。

現在の時刻表示（開いた時点の時刻）
現在の時刻表示（リアルタイム表示）
現在の曜日表示

HTMLは共通で以下にします。

<span id="view_time"></span>

現在の時刻表示（開いた時点の時刻）

ページを開いた時点の時間を表示します。

右下の『Rerun』をクリックすれば時間は更新されます。

See the Pen
現在の時刻表示（開いた時点の時刻） by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptはこちらになります。

document.getElementById("view_time").innerHTML = getNow();

function getNow() {
  const now = new Date();
  const year = now.getFullYear();
  const mon = now.getMonth() + 1;
  const day = now.getDate();
  const hour = now.getHours();
  const min = now.getMinutes();
  const sec = now.getSeconds();
  const s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; 
  return s;
}

月を表示するgetMonthは数字のカウントが0から始まるため、1月は0、2月は1となってしまうので＋1にして1月は0＋1＝1となるようにしています。

現在の時刻表示（リアルタイム表示）

こちらはリアルタイムで表示されます。

See the Pen
現在の時刻表示（リアルタイム表示） by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptはこちらになります。

timerID = setInterval('clock()',500);

function clock() {
  document.getElementById("view_time").innerHTML = getNow();
}

function getNow() {
  const now = new Date();
  const year = now.getFullYear();
  const mon = now.getMonth()+1;
  const day = now.getDate();
  const hour = now.getHours();
  const min = now.getMinutes();
  const sec = now.getSeconds();
  const s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; 
  return s;
}

1行目の500はsetIntervalというメソッドを使って時間を呼び出す時間で、500ミリ秒となります。

表示は1秒単位なのになぜその半分の500ミリ秒（0.5秒）なのかと言うと、処理に遅延が生じた時の誤差を吸収する為です。

現在の曜日表示

See the Pen
現在の月日表示（曜日表示） by junpei (@junpei-sugiyama)
on CodePen.

JavaScriptはこちらになります。

document.getElementById("view_time").innerHTML = getToday();

function getToday() {
  const now = new Date();
  const year = now.getFullYear();
  const mon = now.getMonth()+1;
  const day = now.getDate();
  const week = now.getDay();
  const dayWeek = new Array("日","月","火","水","木","金","土");
  const s = year + "年" + mon + "月" + day + "日 (" + dayWeek[week] + ")";
  return s;
}

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。※ 4月15日に値上げ予定