Dateオブジェクトとは?
DateオブジェクトはJavaScriptに備わっている日時を扱うオブジェクトです。様々なメソッドが用意されており、簡単に時間のデータを操作できます。
Dataオブジェクトは初期化(インスタンス化)して使う
Dataオブジェクトを使う木には、最初にインスタンス化(new Date();)する必要があります。インスタンス化とは、newはオブジェクトを初期化するための演算子です。
初期化の際に、Data()の( )内にパラメーターを含めなければ、現在日時が保存された状態で初期化されます。
現在日時を表示するコードを作成する
年、月、日、時、分のデータを取得し、変数に代入して表示してみましょう。
<p>
日時:<span id ="time"></span>
</p>
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
//getMonthは月を0~11の数字で取得するので、出力する際には+1する必要があります。
const date = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();
const dateOutput =`${year}年${month+1}月${date}日${hour}時${min}分`;
document.getElementById('time').textContent = dateOutput;
Dataオブジェクトに関連するメソッド一覧
次のようなメソッドがあります。
getFullYear() | 年を取得する。 |
getMonth() | 月を0~11の値で取得する。 |
getDate() | 日を取得する。 |
getDay() | 曜日を0~6の数値で取得する。 |
getHours() | 時を取得する。 |
getMinutes() | 分を取得する。 |
getSeconds() | 秒を取得する。 |
getMilliseconds() | ミリ秒を0~999の数値で取得する。 |
getTimezoneOffset() | 時差を取得する。 |
getTime() | 1970年1月1日0時からの時間をミリ秒で取得する。 |
12時間表示にする
24時間表示を12時間表示にしてみましょう。色んな方法がありますが、一例を書いておきます。
<p>
日時:<span id ="time"></span>
</p>
const now = new Date();
const hour = now.getHours();
const min = now.getMinutes();
let ampm;
if(hour > 12){
ampm ="pm";
}else{
ampm ="am";
}
const dateOutput =`${hour%12}時${min}分${ampm}`;
//テンプレート文字列内では計算もできます。
document.getElementById('time').textContent = dateOutput;
hourは0~23の値で出力されます。それを12で割った余りが12時間表示の「時間」となります。21時の場合には、次の式のように9時となります。
例:21÷12 = 1 余り 9