コーディング Web制作 JavaScript

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

【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;
}

以上になります。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, JavaScript
-