[JavaScript/JQuery]本日の日付,時間,曜日を表示する

本日は日時と曜日をJavaScriptとJQueryで取得表示させていきたいと思います！

【完成後】

ページにアクセスした時間が作成できます。

それではいってみましょう！

1 Dateクラス
- 1.1 使用方法
2 メソッド
3 サンプルコード
4 まとめ

Dateクラス

使用方法

まずはnew Date()としてインスタンス化してDateクラスのメソッドを使用できるようにします。

※DateのDは大文字で記入します。

例

var ins = new Date();

document.write(ins.getFullYear());

</script>

newに不慣れな人もここは難しく考えないので、たったの3文字newと記述するだけでDateクラスのメソッドが使用できるんだでいいと思います。

他の言語も使用法はほぼ一緒ですからネ(*^^)v

それではこれでDateクラスのメソッドが使用できるようになったので日付などの一覧を見ていきましょう！

メソッド

日付

メソッド	詳細	例
getFullYear()	年（数字4桁）	2020年→2020
getMonth()	月（数字 1月が0から始まる）	1月→0、12月→11
getDate()	日（数字）	25日→25

var ins = new Date(); //インスタンス化

document.write(ins.getFullYear()); //結果2020

document.write(ins.getMonth() + 1); //結果11

document.write(ins.getDate()); //結果22

</script>

時間

メソッド	詳細	例
getHours()	時（数字　0～23）	14時→14
getMinutes()	分（数字　0～59）	20分→20
getSeconds()	秒（数字　0～59）	20秒→20
getMilliseconds()	ミリ秒（数字　0～999）	504ミリ秒→504
getTime()	経過ミリ秒数	1606048015504

var ins = new Date(); //インスタンス化

document.write(ins.getHours()); //結果21

document.write(ins.getMinutes()); //結果26

document.write(ins.getSeconds()); //結果28

document.write(ins.getMilliseconds());//結果504

document.write(ins.getTime()); //結果1606048015504

</script>

曜日

メソッド	詳細	例
getDay()	曜日（数字　0～6）	日(0)月(1)火(2)水(3)木(4)金(5)土(6)

var ins = new Date(); //インスタンス化

document.write(ins.getDay()); //結果0

</script>

曜日の場合は数字で値が返ってくるのでこの値を上手に利用します。

上記の例のような日から土までの番号付きの曜日を実現化させます。

実現化

①日～土をグループ化します（配列）

②日～土に0からの番号を付けます（配列インデックス）

この2つで上記の例のような番号付きの曜日が実現できます＼(^^)／

配列を作成する

1 2	$week = ['日', '月', '火', '水', '木', '金', '土']; //日(0) 月(1) 火(2) 水(3) 木(4) 金(5) 土(6)

これで日から土までの配列が完成です。

配列の取得

$week = ['日', '月', '火', '水', '木', '金', '土'];

//日(0) 月(1) 火(2) 水(3) 木(4) 金(5) 土(6)

var ins = new Date();

//インスタンス化

var todeyWeek = $week[ins.getDay()];

//$week[] ➔ 曜日の配列

//ins.getDay() ➔ 曜日の配列インデックス番号

//todeyWeek ➔ 変数に格納

document.write(todeyWeek);

//作成した変数を書出す

</script>

例

【結果】 → 日

本日の曜日が表示されます(*^^)v

サンプルコード

それではここまで日付から時間、曜日までの取得ができるようになったので全てを表示させるサンプルコードを記述していきます。

<!DOCTYPE html>

<head>

<title>sampleDay</title>

</head>

<body>

$week = ['日', '月', '火', '水', '木', '金', '土'];

//日(0) 月(1) 火(2) 水(3) 木(4) 金(5) 土(6)

var ins = new Date(); //インスタンス化

//日付

var y = ins.getFullYear();

var M = ins.getMonth() + 1;

var d = ins.getDate();

//曜日

var w = $week[ins.getDay()];

//時間（sliceで下2桁表示にする）

var h = ('0' + ins.getHours()).slice(-2);

var m = ('0' + ins.getMinutes()).slice(-2);

var s = ('0' + ins.getSeconds()).slice(-2);

//クラスサンプルに表示させる

$('.sample').text(y + "/" + M + "/" + d +

"(" + w + ")" + h + ":" + m + ":" + s);

</script>

</body>

</html>

【結果】

このようにあなたがこのページにアクセスした時間が表示されます(*^^)v

まとめ

javascriptとjQueryで日時と曜日を表示させてみました。

気を付けなくてはいけないのは、月が1月ではなく0月からなので+1するのと、表示をsliceメソッドで1桁表示、2桁表示にするかどうかを注意するようにしましょう。

Javascriptでリアルタイム表示もできるので次回はそちらもデモしていきたいと思いますヾ ^_^♪

以上です。

次回はリアルタイムに日時と曜日を表示させる

https://dailyrecords.blog/archives/8504