Web制作 JavaScript

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

2023年12月31日まで!5大無料特典あり🎁

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

累計1100部突破!レビュー570件!

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で公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

2023年12月31日まで!5大無料特典あり🎁

販売ページとレビューを見てみる

-Web制作, JavaScript