日時の取得の手順
Date オブジェクトから今日の日時を取得する
手順1:現在の日時をインスタンス化し、変数に代入する
まず、「new Date()」を使って、現在の日時を記憶した状態(インスタンス化)し、変数に代入します。
const today = new Date();
Date オブジェクト日時を取得する主なメソッド対応表
メソッド | 説明 |
---|---|
new Date() | 現在の日時を記憶した状態でDateオブジェクトを初期化する |
getFullYear() | 年を取得する |
getMonth() | 月を0〜11の数値で取得する(0が1月) |
getDate() | 日を取得する |
getDay() | 曜日を0〜6の数値で取得する(0が日曜日) |
getHouurs() | 時を取得する |
getMinutes() | 分を取得する |
getSeconds() | 秒を取得する |
getMilliseconds() | ミリ秒を0〜999の数値で取得する |
getTimezoneOffset() | 時差を取得する |
getTime() | 1970年1月1日0時からの時間をミリ秒で取得する |
setFullYear() | 年(西暦)を設定する |
setMonth() | 月を0〜11の数値で設定する |
setDate() | 日を設定する |
setHoure() | 時を設定する |
setMinutes() | 分を設定する |
setSeconds() | 秒を設定する |
setMilliseconds() | ミリ秒を0〜999の数値で設定する |
setTime() | 1970年1月1日0時からの時間をミリ秒で設定する |
手順2:年、月、日、時 を個別に取得し変数に代入する
● HTML部分
-
ここに日付を表示する
-
ここに日付を表示する
上記の表を参考に、現在の日時をインスタンス化した Date オブジェクトから年月日時を個別に取得し、変数に代入します。
const today = new Date();
const year = today.getFullYear();/*年*/
const month = today.getMonth()+1;/*月*/
/*月は0始まりなので +1(プラス)する*/
const day = today.getDay();/*曜日*/
const weeks = [‘日’,’月’,’火’,’水’,’木’,’金’,’土’];/*曜日の配列*/
/*曜日の配列を作りその中の該当する曜日で表示する*/
const week = weeks[day];/*配列の中から抽出*/
const date = today.getDate();/*日*/
const hour = today.getHours();/*時*/
const minute = today.getMinutes();/*分*/
let str = document.getElementById(‘today’);/*表示したい場所のIDを取得し変数に代入*/
/*表示したい場所のテキストを書き換える*/
str.textContent = `今日の日時は${year}年${month}月${date}日${week}曜日の${hour}時${minute}分です。`;
最後に表示したい場所のIDを getElementById を使って取得し、 textContent を使って表示したい場所のテキストを書き換えます。
getElementById を使わずに、 querySelector を使ってHTMLの要素を取得して書き換えるのも一般的な方法の一つになります。
ただ処理の時間は「getElementById」よりも時間がかかるので使い分けることが重要になります。
下記は「querySelector」を使った場合の書き方になります。
● querySelector を使った場合
- // HTMLの要素を取得
- let str2 = document.querySelector(‘#today2’);
- str2.textContent = `今日の日時は${year}年${month}月${date}日${week}曜日の${hour}時${minute}分です。`;
以下の CodePenも参考にしてください。