DateオブジェクトのgetTimeメソッドを使って、日付の計算を行う方法について解説します。getTimeメソッドはDateオブジェクトの基準時間である1970年1月1日を起点とし、経過した「ミリ秒」を返すメソッドです。
日付(Date)オブジェクトの基本については、「JavaScriptで日付や時刻を表示する方法」で説明していますのでご参考下さい。
目次
1.1. getTimeメソッドで指定した日付の経過ミリ秒を取得する
1.2. 時間換算の基本
1.2.1. getTime()メソッドで取得した経過ミリ秒を「秒」に換算する
1.2.2. getTime()メソッドで取得した経過ミリ秒を「分」に換算する
1.2.3. getTime()メソッドで取得した経過ミリ秒を「時」に換算する
1.2.4. getTime()メソッドで取得した経過ミリ秒を「日」に換算する
1.2.5. getTime()メソッドで取得した経過ミリ秒を「年」に換算する
1.3. getTimeメソッドで取得したミリ秒から経過した日数を計算する
1. getTimeメソッドの使い方
1.1. getTimeメソッドで指定した日付の経過ミリ秒を取得する
Dateオブジェクトのメソッドに、日付計算の基準時間となる「1970年1月1日」からの経過ミリ秒を取得する「getTime()メソッド」があります。
サンプルコードを保存して、getTime()メソッドの使い方を覚えましょう。
「getTime11.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime11.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction011()">ミリ秒を表示</button>
<p id="date011">ここに基準時間から経過した「ミリ秒」が表示されます。</p>
<script>
function dateFunction011() {
//日付オブジェクト(基準時間)を作成する
var date0 = new Date(0);
//日付オブジェクト(指定日)を作成する
var date1 = new Date(2017, 0, 1, 9);
//指定した日付の「ミリ秒」を[date_ms]に代入する
var date_ms = date1.getTime();
//段落タグの中身を置き換える
var pelem011 = document.getElementById("date011");
pelem011.innerHTML = "基準時間:" + date0 + "<br>経過ミリ秒は [ " + date_ms + " ] ミリ秒です";
}
</script>
</body>
</html>
日付オブジェクトの計算の基準時間となる日付を設定します。「 new Date(0);」とDateオブジェクトの引数にゼロ「0」を指定すると、基準時間を指定する事ができます。
特定の日付を指定して日付オブジェクトを設定しています。今回は「2017年1月1日の9時」を設定しました。月は「0」から始まりますので、1月を表す「0」を月に指定します。
22行目の「date1.getTime()」で「1970年1月1日」から「2017年1月1日」までに経過した「ミリ秒」を取得する事ができます。
取得した「ミリ秒」を表示します。以下にgetTime()メソッドのサンプルコードを記述しましたので、ボタンをクリックして確認してみて下さい。
ボタンをクリックして下さい。
ここに基準時間から経過した「ミリ秒」が表示されます。
「ミリ秒を表示」ボタンをクリックすると、基準時間の「Thu Jan 01 1970 09:00:00 GMT+0900 (東京 (標準時))」と経過ミリ秒の「1483228800000」が表示されます。
1.2. 時間換算の基本
1.2.1. getTime()メソッドで取得した経過ミリ秒を「秒」に換算する
getTime()メソッドで取得する「ミリ秒」の基準となる時間は、「1970年1月1日」のグリニッジ標準時(GMT)で「0時00分00秒」になります。日本標準時に直すと、時差は9時間ありますので、「1970年1月1日」の「9時0分00秒」という事になります。
この「ミリ秒」を使った時間換算の計算はよく使いますので、基本の式を頭に入れておきましょう。
まずは、「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」から「経過秒数」を計算するサンプルコードを確認します。
「getTime121.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime121.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction0121()">経過時間を表示</button>
<p id="date0121">ここに1970年1月1日から経過した時間が表示されます。</p>
<script>
function dateFunction0121() {
//時間換算用の変数を作成する
//1秒=1000ミリ秒
var seconds = 1000;
//1分=1000ミリ秒×60秒
var minutes = 1000 * 60;
//1時間=1000ミリ秒×60秒×60分
var hours = 1000 * 60 * 60;
//1日=1000ミリ秒×60秒×60分×24時間
var days = 1000 * 60 * 60 * 24;
//1年=1000ミリ秒×60秒×60分×24時間×365日
var years = 1000 * 60 * 60 * 24 * 365;
//日付オブジェクトを作成する
var dt = new Date(2020,0, 1, 9);
var ms = dt.getTime();
//1970年1月1日からの経過ミリ秒を「秒」に換算する
var ss = (ms / seconds);
//段落タグの中身を置き換える
var pelem0121 = document.getElementById("date0121");
pelem0121.innerHTML = "1970年1月1日から<br>"
+ dt + "<br>までの経過時間は<br>[ "
+ ss + " ]秒です。";
}
</script>
</body>
</html>
経過ミリ秒から「秒」、「秒」、「分」、「時」、「日」、「年」に換算する時に使う計算式をそれぞれ変数に代入しています。ブラウザーへの表示は「秒」のみ表示するコードですが、後程ひとつづつコードを確認してゆきましょう。
まず、「経過ミリ秒」を「秒」に換算するには、単純に「1000」で割る事で「経過秒数」がでてきますので、秒数換算に用いる変数「seconds」に「1000」を代入します。
日付(Date)オブジェクトの作成では、1970年から50年後の「2020年1月1日の9時」を設定しています。「dt.getTime()」で経過ミリ秒を変数「ms」に代入します。
「経過ミリ秒(ms)/1000(seconds)」の計算式を変数「ss」に代入し、秒数に換算した数値を作成しブラウザーに表示します。
ボタンをクリックして下さい。
ここに1970年1月1日から経過した時間が表示されます。
サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過秒数である「1,577,836,800秒」が表示されます。
1.2.2. getTime()メソッドで取得した経過ミリ秒を「分」に換算する
次は、「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「分」に換算してみましょう。
「getTime122.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime122.html
・・・省略・・・
<script>
function dateFunction0122() {
//1分=1000ミリ秒×60秒
var minutes = 1000 * 60;
//日付オブジェクトを作成する
var dt = new Date(2020,0, 1, 9);
var ms = dt.getTime();
//1970年1月1日からの経過ミリ秒を「分」に換算する
var mm = (ms / minutes);
//段落タグの中身を置き換える
var pelem0122 = document.getElementById("date0122");
pelem0122.innerHTML = "1970年1月1日から
"
+ dt + "
までの経過時間は
[ "
+ mm+ " ]分です。";
}
</script>
「ミリ秒」を「分」に換算するには、「経過ミリ秒」を「60000ミリ秒(1000ミリ秒×60秒)」で割ると「経過分数」を計算する事ができますので、変数「minutes」に「1000 * 60」を代入しています。
「経過ミリ秒(ms)/60000(minutes)」の計算式を変数「mm」に代入し、分数に換算した数値を作成します。
ボタンをクリックして下さい。
ここに1970年1月1日から経過した時間が表示されます。
サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過分数である「26,297,280 分」が表示されます。
1.2.3. getTime()メソッドで取得した経過ミリ秒を「時」に換算する
「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「時」に換算してみましょう。
「getTime123.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime123.html
・・・省略・・・
<script>
function dateFunction0123() {
//1時間=1000ミリ秒×60秒×60分
var hours = 1000 * 60 * 60;
//日付オブジェクトを作成する
var dt = new Date(2020,0, 1, 9);
var ms = dt.getTime();
//1970年1月1日からの経過ミリ秒を「時」に換算する
var hh = (ms / hours);
//段落タグの中身を置き換える
var pelem0123 = document.getElementById("date0123");
pelem0123.innerHTML = "1970年1月1日から
"
+ dt + "
までの経過時間は
[ "
+ hh + " ]時間です。";
}
</script>
「ミリ秒」を「時」に換算するには、「経過ミリ秒」を「3600000ミリ秒(1000ミリ秒×60秒60分)」で割ると「経過分数」を計算する事ができますので、変数「hours」に「1000 * 60 * 60」を代入しています。
「経過ミリ秒(ms)/3600000(hours)」の計算式を変数「hh」に代入し、分数に換算した数値を作成します。
ボタンをクリックして下さい。
ここに1970年1月1日から経過した時間が表示されます。
サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過時間である「438,288 時間」が表示されます。
1.2.4. getTime()メソッドで取得した経過ミリ秒を「日」に換算する
「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「日」に換算してみましょう。
「getTime124.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime124.html
・・・省略・・・
<script>
function dateFunction0124() {
//1日=1000ミリ秒×60秒×60分×24時間
var days = 1000 * 60 * 60 * 24;
//日付オブジェクトを作成する
var dt = new Date(2020,0, 1, 9);
var ms = dt.getTime();
//1970年1月1日からの経過ミリ秒を「日」に換算する
var dd = (ms / days);
//段落タグの中身を置き換える
var pelem0124 = document.getElementById("date0124");
pelem0124.innerHTML = "1970年1月1日から
"
+ dt + "
までの経過時間は
[ "
+ dd + " ]日です。";
}
</script>
「ミリ秒」を「時」に換算するには、「経過ミリ秒」を「86400000ミリ秒(1000ミリ秒×60秒60分×24時間)」で割ると「経過日数」を計算する事ができますので、変数「days」に「1000 * 60 * 60 * 24」を代入しています。
12行目で「経過ミリ秒(ms)/86,400,000(days)」の計算式を変数「dd」に代入し、分数に換算した数値を作成し、18行目でブラウザーに表示します。
ボタンをクリックして下さい。
ここに1970年1月1日から経過した時間が表示されます。
サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過日数である「18,262 日」が表示されます。計算した日数には、うるう年の2月29日も含まれています。
1.2.5. getTime()メソッドで取得した経過ミリ秒を「年」に換算する
「1970年1月1日」から「2020年1月1日」までの「経過ミリ秒」を「年」に換算してみましょう。
「getTime125.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime125.html
・・・省略・・・
<script>
function dateFunction0125() {
//1日=1000ミリ秒×60秒×60分×24時間×365日
var years = 1000 * 60 * 60 * 24 * 365;
//日付オブジェクトを作成する
var dt = new Date(2020,0, 1, 9);
var ms = dt.getTime();
//1970年1月1日からの経過ミリ秒を「年」に換算する
var yyyy = (ms / years);
//段落タグの中身を置き換える
var pelem0125 = document.getElementById("date0125");
pelem0125.innerHTML = "1970年1月1日から
"
+ dt + "
までの経過時間は
[ "
+ yyyy + " ]年です。";
}
</script>
「ミリ秒」を「年」に換算するには、「経過ミリ秒」を「31,536,000,000ミリ秒(1000ミリ秒×60秒60分×24時間×365日)」で割ると「経過年数」を計算する事ができますので、変数「years」に「1000 * 60 * 60 * 24 * 365」を代入しています。
「経過ミリ秒(ms)/31,536,000,000(years)」の計算式を変数「yyyy」に代入し、日数に換算した数値を作成しブラウザーに表示します。
ボタンをクリックして下さい。
ここに1970年1月1日から経過した時間が表示されます。
サンプルコードのボタンをクリックすると、「1970年1月1日」から「2020年1月1日」までの経過年数である「50.032876712328765 年」が表示されます。うるう年は365日ではない為、「12日」分が計算結果の端数として表示されます。
1.3. getTimeメソッドで取得したミリ秒から経過した日数を計算する
1.1のサンプルコードで、基準時間から経過した「ミリ秒」を取得しましたが、この「ミリ秒」を元に、基準時間から経過した「日数」を計算してみましょう。
「getTime13.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime13.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction013()">日数を表示</button>
<p id="date013">ここに基準時間から経過した「日数」が表示されます。</p>
<script>
function dateFunction013() {
//日付オブジェクト(基準時間)を作成する
var date0 = new Date(0);
//日付オブジェクト(指定日)を作成する
var date1 = new Date(2017, 0, 1, 9);
//指定した日付の「ミリ秒」を[date_ms]に代入する
var date_dd = date1.getTime() / (1000 * 60 * 60 * 24);
//段落タグの中身を置き換える
var pelem013 = document.getElementById("date013");
pelem013.innerHTML = "基準時間:" + date0 + "<br>経過日数は [ " + date_dd + " ] 日です";
}
</script>
</body>
</html>
取得した「ミリ秒」を1日のミリ秒である「1000 × 60 × 60 × 24」で割って「日数」を算出しています。
ボタンをクリックして下さい。
ここに基準時間から経過した「日数」が表示されます。
「日数を表示」ボタンをクリックすると、基準時間の「Thu Jan 01 1970 09:00:00 GMT+0900 (東京 (標準時))」と経過日数の「17167」が表示されます。
2. DateオブジェクトのgetTimeメソッドを使って日付を比較する方法
2.1. ニつの日付データーを比較する
Dateオブジェクトを二つ作成して、日付の大小を比較してみましょう。
「getTime21.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime21.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction021()">クリック</button>
<p id="date021">ここに指定した日付の内、大きい方の日付が表示されます。</p>
<script>
function dateFunction021() {
//日付オブジェクト(指定日1)を作成する
var date0 = new Date(2017, 0, 1, 14);
//日付オブジェクト(指定日2)を作成する
var date1 = new Date(2017, 0, 10, 9);
//指定した日付の大小を比較する
if (date0.getTime() < date1.getTime()){
var date_past = date0;
var date_future = date1;
}else{
var date_past = date0;
var date_future = date1;
}
//段落タグの中身を置き換える
var pelem021 = document.getElementById("date021");
pelem021.innerHTML = date_past + "<br>よりも<br>" + date_future + "<br>の方が後の日付になります。";
}
</script>
</body>
</html>
「2017年1月1日14時」の日付、「2017年1月10日9時」の日付オブジェクトを作成します。それぞれの日付のミリ秒をgetTimeメソッドで取得すると、数値どうしの比較ができます。経過ミリ秒の多い方がより後の日付になりますので、条件文で日付を比較し、条件に応じた処理を行う事ができます。
日付の古い方を変数「date_past」に代入し、新しい方を「date_future」に代入し結果を表示しています。
ボタンをクリックして下さい。
ここに指定した日付の内、大きい方の日付が表示されます。
ボタンをクリックすると、指定した日付の比較結果が表示されます。
2.2. 指定日Aから指定日Bまでの経過時間(差分)を計算する
Dateオブジェクトを使って、指定した日付Aから日付Bまでの経過時間を計算してみましょう。「2017年2月28日6時」から「2017年3月1日18時」までに経過した時間をgetTimeメソッドを使って計算します。
「getTime22.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●getTime22.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>JavaScript 入門</h1>
<p>ボタンをクリックして下さい。</p>
<button onclick="dateFunction022()">差分を表示</button>
<p id="date022">ここに指定日Aと指定日Bの差分が表示されます。</p>
<script>
function dateFunction022() {
//日付オブジェクト(指定日A)を作成する
var date0 = new Date(2017, 1, 28, 6);
//日付オブジェクト(指定日B)を作成する
var date1 = new Date(2017, 2, 1, 18);
//指定日Aと指定日Bの差分(ミリ秒)を計算する
var date_diff = date1.getTime() - date0.getTime();
//経過ミリ秒を「日数」に換算する
var diff_dd = date_diff/(24*60*60*1000);
//経過ミリ秒を「時間」に換算する
var diff_hh = date_diff/(60*60*1000);
//段落タグの中身を置き換える
var pelem022 = document.getElementById("date022");
pelem022.innerHTML = "<b>指定日A「2017年2月28日6時」と指定日B「2017年3月1日18時」の差分</b>"
+ "<br>ミリ秒:" + date_diff
+ "<br>日数:"+ diff_dd
+ "<br>時間:" + diff_hh;
}
</script>
</body>
</html>
指定日A「2017年2月28日6時」と指定日B「2017年3月1日18時」は「new Date」で生成しています。getTimeメソッドは、1970年1月1日を起点とした経過ミリ秒を取得するメソッドです。それぞれの日付の「経過ミリ秒」を取得し、単純に引き算をします。
指定日Aの経過ミリ秒である「date0.getTime()」は「1,488,229,200,000」、
指定日Bの経過ミリ秒である「date1.getTime()」は「1,488,358,800,000」
です。指定日Aから指定日Bまでの経過時間の計算式は、
1,488,358,800,000 - 1,488,229,200,000 = 129,600,000
になります。変数の「date_diff」には、計算結果の「129,600,000」が代入されます。
25行目では「ミリ秒」を「日数」に換算する計算式の
date_diff/(24*60*60*1000)
を変数の「diff_dd」に代入し、「ミリ秒」を「時間」に換算する計算式の
date_diff/(60*60*1000)
を変数の「diff_hh」に代入します。
全ての計算結果をJavaScriptで整形してブラウザーに表示しています。
ボタンをクリックして下さい。
ここに指定日Aと指定日Bの差分が表示されます。
ボタンをクリックすると、指定日Aと指定日Bの差分が表示されますので確認してみて下さい。
「2017年2月28日6時」から「2017年3月1日18時」までの経過ミリ秒は「129,600,000ミリ秒」、経過日数は「1.5日」、経過時間は「36時間」です。
【関連記事】JavaScriptで日付や時刻を表示する方法
【関連記事】JavaScriptで日付と時刻をフォーマットしてみよう!
【関連記事】JavaScriptで日付を計算する方法