現在日時と日時指定して表示してみる! Javascript超初心者の勉強

2020-05-22

久しぶりに初心に戻ってJavascriptです。functionとメソッドについて書いてからだいぶたってしまいました。

今回はJavascriptで現在日時や指定した日付を表示させたいと思います。

about:blankのコンソールを使って学んでいきます。

日時を指定して表示する

指定した日付をJavascriptで扱ってみましょう。

年月日時を指定( new Date(引数) )

new Date()で日付を指定して表示させてみます。

// 日時の文字列で取得
let day1 = new Date( '2020/11/27 20:30' );
let day2 = new Date( 2020, 10, 27, 21, 30 );
console.log( day1 );

// Fri Nov 27 2020 20:30:00 GMT+0900 (日本標準時)
console.log( day2 );
// Fri Nov 27 2020 21:30:00 GMT+0900 (日本標準時)

経過ミリ秒で取得

JavaScriptではミリ秒で時間を指定することもできます。

let day = new Date( 1511782200000 );
console.log( day );

// Mon Nov 27 2017 20:30:00 GMT+0900 (日本標準時)

現在日時を取得・表示する

現在日時をJavascriptで扱ってみましょう。

単純に取得する( new Date() )

new Date()を使って現在日時を取得することができます。

//引数なしで取得
let now = new Date();

console.log( now );
// Mon May 18 2020 22:24:09 GMT+0900 (日本標準時)

年月日時分で表示する

new Date() をそのまま使うと読みづらいので、年月日時分のフォーマットで表示させたいと思います。

// function nowTime()を作成
function nowTime(){ // 年月日に整えます
let now = new Date(); // 現在日時を取得
let year = now.getFullYear(); // nowから年を取り出す
let month = now.getMonth()+1; // nowから月を取り出す
let date = now.getDate(); // nowから日付を取り出す
let hour = now.getHours(); // nowから時間を取り出す
let minute = now.getMinutes(); // nowから分を取り出す
let time = "現在" + year + "年" + month + "月" + date + "日" + hour + "時" + minute + "分";

console.log( time );
}
nowTime(); // functionの呼び出し
// 現在2020年5月18日23時9分

AM PMで表示する

AM PMで表記したいそんな時の書き方です。

//現在の日時を例えば13:12から1:12amのようにしてコンソールへ書き出す
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth()+1;
let date = now.getDate();
let hour = now.getHours();
let minute = now.getMinutes();

// am pm を設定
let ampm = ""
if( hour < 12){
ampm = "a.m."
}else{
ampm = "p.m."
}
// ampm表記に合わせて、時間を12で割った余りにし整形
let time = "現在" + year + "年" + month + "月" + date + "日" + (hour % 12) + "時" + minute + "分" + ampm;

console.log(time);
// 現在2020年5月18日11時11分p.m.

おわり

Javascriptではじめて現在日時の取得方法を学んだ時にとても難しく感じました。今はこんな書き方があるんだ程度で学べばいいと思います。実際使うことがあっても正直コピペしてます。

Date()を使ってカウントダウンの作成の練習をしてみるのもおすすめです。