特定の日時から経過した時間を計算する

2つの時間を比較して経過した時間を計算する

ある時刻を起点にして、そこから経過した時間を計算するときはタイムスタンプを使用します。

タイムスタンプはNumberの値で、「1970年1月1日 00:00:00」からの経過時間をミリ秒単位で現します。
この値は数値として足し算／引き算ができるため、この性質を使って「1秒後」「30分前」などの時間の計算をすることができます。

以下の例では、「2000年1月1日 00:00:00」を起点として現在の時間と比較し、経過した時間を「x日」や「x時間」などそれぞれの単位で計算して出力します。

JS コード例

// インスタンス作成
let past_time = new Date('2000/1/1 00:00:00');
console.log(past_time);
// Sat Jan 01 2000 00:00:00 GMT+0900 (日本標準時)

console.log(new Date());
// Tue Jun 02 2020 15:51:31 GMT+0900 (日本標準時)

// 時間差を計算
let diff_time = Date.now() - past_time.getTime();

let pass_seconds = Math.floor(diff_time / 1000);
console.log(pass_seconds + "秒が経過");
// 644428213秒が経過

let pass_minutes = Math.floor(diff_time / (60 * 1000));
console.log(pass_minutes + "分が経過");
// 10740470分が経過

let pass_hours = Math.floor(diff_time / (60 * 60 * 1000));
console.log(pass_hours + "時間が経過");
// 179007時間が経過

let pass_dates = Math.floor(diff_time / (24 * 60 * 60 * 1000));
console.log(pass_dates　+ "日が経過");
// 7458日が経過

let pass_years = Math.floor(diff_time / (365 * 24 * 60 * 60 * 1000));
console.log(pass_years + "年が経過");
// 20年が経過しました

冒頭の「// インスタンス作成」では「2000年1月1日 00:00:00」の日付を指定してDateオブジェクトのインスタンスを作成し、console.logメソッドで日付を出力します。

続く「new Date」は現在時刻を取得してそのまま出力します。
現時刻のタイムスタンプはDate.nowメソッドで取得するため、ここでは現時刻は変数に保持せず進めます。

「// 時間差を計算」の箇所で、2つのタイムスタンプを使って時間差を計算します。
1つはDate.nowメソッドを使って現時刻のタイムスタンプを取得し、もう1つは「2000年1月1日 00:00:00」のタイムスタンプをgetTimeメソッドで取得して、2つのタイムスタンプの差分を計算します。

以降は、5種類の時間の単位で経過した時間を取得していきます。
「秒」については、次のように計算します。

経過した秒の計算

let pass_seconds = Math.floor(diff_time / 1000);
console.log(pass_seconds + "秒が経過");
// 644428213秒が経過

タイムスタンプは「ミリ秒」単位の数値になっているので、単位を「秒」にするために「1000」で割ることで取得します。
計算結果はMath.floorメソッドを実行して小数点以下を切り捨ている点もポイントです。

計算結果は変数pass_secondsに入れて、その後すぐにconsole.logメソッドで出力します。
「分」など他の単位でも基本的な処理は共通ですが、取得した値はMath.floorメソッドで切り捨てて丸めているため、得られる値は厳密には「約x分が経過」であると考えてください。
特に「年」の計算についてはより正確な値を得るには閏年を加味する必要があります。

ページが読み込まれてから経過した時間を計算する

先ほどの時間の計算を使って、ページを読み込んでから経過した時間を秒数で出力します。

JS コード例

// 開始時点のタイムスタンプを取得
let start_time = Date.now();

setInterval(function(){
  let diff_time = Math.abs(start_time - Date.now()) / 1000;
  console.log(Math.floor(diff_time) + "秒経過");
}, 1000);

// 1秒経過
// 2秒経過
// 3秒経過
// 4秒経過
// 5秒経過
// ... 1秒ごとに出力が繰り返される

こちらのコードを実行すると、1秒ごとに経過した時間が延々と出力されていきます。
以降はコード内容の解説です。

冒頭で開始時点のタイムスタンプを取得して、変数start_timeに入れます。
これが以降の計算の起点となる時間です。

今回は1秒ごとに経過した秒数を出力するため、setIntervalメソッドで定期処理を繰り返すよう設定します。
setIntervalメソッドは第1パラメータに実行する処理を指定し、第2パラメータに定期処理する時間を「ミリ秒」単位で指定します。
今回は1秒ごとに定期処理をするため、「1000」と指定しています。
ここまでで、1秒ごとに第1パラメータに指定した処理を繰り返す仕組みが設定されました。

setIntervalメソッドの第1パラメータに指定した処理の内容を確認していきます。
まず、1行目では開始時刻から現時刻を差し引き、経過した時間を取得します。
「開始時刻 – 現在時刻」で計算するため、計算した値は必ず負の値になります。
そこで、Math.absメソッドを使って絶対値を取得し、さらに「秒」単位に補正するために1000で割り、計算結果を変数diff_timeに入れます。

計算結果を出力するconsole.logメソッドでは小数点以下の端数を切り捨てるためにMath.floorメソッドを使い、丸めた値を出力します。

以上がコードの内容になります。
今回は1秒ごとに設定していますが、「10秒ごと（10000）」「1分ごと（60000）」などに設定することも可能です。