12.
日付処理
日付処理の基本
Dateオブジェクトとは
JavaScriptの日付処理はDateオブジェクトで処理します。Dateオブジェクトは日付や時刻の取得、設定、計算などの操作を行うことができます。
Dateオブジェクトを作成
Dateオブジェクトを作成します。
js/date.js
var date = new Date();
現在の日付表示
js/date.js
var date = new Date();
console.log(date);
結果
new Date() で作成した日付オブジェクトをもとに、日付や時間、曜日などを取得できます。
getFullYear()
getFullYear() は4桁の年取得するメソッドです。
var year = date.getFullYear()
getMonth()
getMonth() は月を取得するメソッドです。1月が「0」になるため「+1」する必要があります。
var month = date.getMonth() + 1
getDate()
getDate() は日を取得するメソッドです。
var day = date.getDate()
getHours()
getHours() は時間を取得するメソッドです。
var hour = date.getHours()
getMinutes()
getMinutes() は分を取得するメソッドです。
var minute = date.getMinutes()
getSeconds()
getSeconds() は秒を取得するメソッドです。
var second = date.getSeconds()
getDay()
getDay() は曜日の数値を取得するメソッドです。日曜日が「0」ではじまります。
var dayOfWeek = date.getDay()
リアルタイム時計
リアルタイムで現在の日時を表示してみましょう。
ファイル構成
/
├── date.html
└── js
└── date.js
date.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>リアルタイム時計</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="text-center bg-white p-8 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 mb-4">現在時刻</h2>
<p id="datetime" class="text-xl"></p>
</div>
<script src="js/date.js"></script>
</body>
</html>
ゼロ埋め
String()
String()は、数字を文字列に変更します。
String(数値)
padStart()
padStart() は、指定した長さになるまで文字列の先頭に、指定の文字を追加します。
padStart(数値)
str.padStart(長さ, 文字列)
ゼロ埋め処理
String() と padStart() を使って、一桁の数字をゼロ埋めします。
var number = 1;
var numberString = String(number).padStart(2, '0'); // 01
現在の日時
関数定義
updateTime() を定義して、現在の日時をコンソールで確認します。
js/date.js
function updateTime() {
// 現在の日時取得
const now = new Date();
}
// 初回表示を即時実行
updateTime();
コンソール
Mon Oct 07 2024 23:09:34 GMT+0900 (日本標準時)
日付フォーマット
現在の日時を、YYYY/MM/DD HH:MM:SSフォーマットで表示します。
js/date.js
// 現在の年月日と時刻を表示する
function updateTime() {
const now = new Date();
// 年月日を取得 & ゼロ埋め
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
// 時刻を取得 & ゼロ埋め
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
// YYYY/MM/DD HH:MM:SS に連結
const formattedDateTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
// 日時表示
const datetimeElement = document.getElementById("datetime");
datetimeElement.innerHTML = formattedDateTime;
}
updateTime();
動作確認
リアルタイム更新
setInterval() で１秒ごとに、updateTime() を実行します。
js/date.js
// 1秒ごとに現在の時刻を更新
setInterval(updateTime, 1000);
動作確認
リアルタイムで日時が更新されたら成功です。
