現在の時刻を取得する - JavaScript
JavaScriptで現在時刻を取得するコードを紹介します。
概要
JavaScriptで現在の時刻を表示する場合は、new Date()にてDateオブジェクトを作成し、
getHours() getMinutes() メソッドなどを呼び出すことで時刻や日付の要素を取得できます。
また、今日の日付を表示する場合は、new Date()にてDateオブジェクトを作成し、
getFullYear() getMonth() getDate()メソッドなどを呼び出すことで日付の要素を取得できます。
書式
Dateオブジェクトの作成
Dateオブジェクトのインスタンスを作成すると、現在の時刻を示すDateオブジェクトが作成されます。
各日時要素の取得
Dateオブジェクトが示す時刻や日付の要素を取得するには下記のメソッドを利用します。
| 項目 | メソッド名 |
|---|
| 年 | getFullYear() |
| 月 | getMonth() |
| 日 | getDate() |
| 時 | getHours() |
| 分 | getMinutes() |
| 秒 | getSeconds() |
| ミリ秒 | getMilliseconds() |
| 曜日 | getDay() |
注意：月の表現
getDay()で取得できる月の数値の意味は下記になります。getMonth()で取得できる月の値はその数値が示す月ではありませんので注意してください。
getMonth()の取得値
| getMonth()の値 | 意味 | 月 |
|---|
| 0 | January | 1月 |
| 1 | February | 2月 |
| 2 | March | 3月 |
| 3 | April | 4月 |
| 4 | May | 5月 |
| 5 | June | 6月 |
| 6 | July | 7月 |
| 7 | August | 8月 |
| 8 | September | 9月 |
| 9 | October | 10月 |
| 10 | Nobember | 11月 |
| 11 | December | 12月 |
曜日の表現
getDay()で取得できる曜日の数値の意味は下記になります。
getDay()の取得値
| getDay()の値 | 意味 | 曜日 |
|---|
| 0 | Sunday | 日曜日 |
| 1 | Monday | 月曜日 |
| 2 | Tuesday | 火曜日 |
| 3 | Wednesday | 水曜日 |
| 4 | Thursday | 木曜日 |
| 5 | Friday | 金曜日 |
| 6 | Saturday | 土曜日 |
プログラム例1:現在の時刻の取得
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var HourValue = now.getHours();
var MinValue = now.getMinutes();
var SecValue = now.getSeconds();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日" + HourValue + ":" + MinValue + ":" + SecValue;
}
</script>
</head>
<body onload="LoadProc();">
現在の時刻:
<div id="DateTimeDisp"></div>
</body>
</html>
解説
Dateオブジェクトを新規に作成し、"DateTimeDisp"のIDを持つDIVタグの要素を取得し現在の時刻を表示します。
getMonth()は1月が0、12月が11となるため、1を加算することに注意してください。
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var HourValue = now.getHours();
var MinValue = now.getMinutes();
var SecValue = now.getSeconds();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日" + HourValue + ":" + MinValue + ":" + SecValue;
}
補足
Bodyタグ内の onload="LoadProc();" を忘れずに。
実行結果
HTMLファイルを表示します。下図の画面が表示されます。現在の時刻が表示されます。
ページをリロードすると時刻表示も更新されます。
プログラム例2:今日の日付(現在の日付)の取得
今日の日付を取得する場合のコードです。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日";
}
</script>
</head>
<body onload="LoadProc();">
<h2>今日の日付を取得するデモ</h2>
<div>
今日の日付:<span id="DateTimeDisp"></span>
</div>
</body>
</html>
解説
ページロード時に以下の
LoadProc() 関数を呼び出し実行します。
Dateオブジェクトを作成し
getFullYear() getMonth() getDate() メソッドを呼び出し、今日の日付の要素の値を取得し、
画面に表示します。
function LoadProc() {
var now = new Date();
var YearValue = now.getFullYear();
var MonthValue = now.getMonth()+1;
var DateValue = now.getDate();
var target = document.getElementById("DateTimeDisp");
target.innerHTML = YearValue + "年" + MonthValue + "月" + DateValue + "日";
}
実行結果
HTMLファイルをWebブラウザで表示します。下図のページが表示されます。
実行時の日付がページに表示されることが確認できます。
変換に関する注意事項
下記コードは月数を取得し1を加算するコードです。
var MonthValue = now.getMonth()+1;
明示的に数値として指定する場合は、下記のコードで数値であることを明示的に指定できます。
var MonthValue = Number(now.getMonth())+1;
一方で、文字列を整形する下記のコードで1を加算する処理を記述すると、文字として認識されて期待した結果と異なる出力になる場合があります。
target.innerHTML = YearValue + "年" + MonthValue+1 + "月" + DateValue + "日" + HourValue + ":" + MinValue + ":" + SecValue;
上記の出力結果
Monthの値 "11" が数値ではなく文字列と認識されるため、 Month+1 が "111" の結果になってしまいます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2013-06-10
改訂日: 2023-12-22
