Web制作 JavaScript

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

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作, JavaScript