Web制作 JavaScript

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

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

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

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

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

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


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の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

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


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, JavaScript