現在の年月日や時刻、曜日を自動で表示させるにはどうすればいいの？
滅多にありませんが実務で『現在の年月日を自動で表示させて欲しい』という要望があったりします。
今回は年月日、時刻、曜日の表示方法をご紹介します。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は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;
}以上になります。
この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！
