はじめに
日付を利用する際に2022/2/22のように絶対値で表現したい場合と、「2年前」のように相対的な経過時間を表現したい場合があります。
SNSではよく後者の表現が利用されますが、後者のような相対的な表現をJavaScriptで実装してみようと思います。
実装方法
こちらの記事を参考にさせていただきました。
ちょっと違う部分は、未来の日付にも対応（xx年後）している部分と対象となった複数の要素を更新し続ける部分です。
コード
<div class="elapsed_time" data-datetime="2022/1/11 10:10"></div>
<div class="elapsed_time" data-datetime="2022/2/22 10:10"></div>function get_elapsed_time(target_datetime_txt) {
let target_datetime = new Date(target_datetime_txt);
let now_datetime_text = new Date().getTime();
let now_datetime = new Date(now_datetime_text);
let diff = now_datetime.getTime() - target_datetime.getTime();
let progress = new Date(Math.abs(diff));
var num = 0;
if (progress.getUTCFullYear() - 1970) {
num = progress.getUTCFullYear() - 1970;
var unit = "年";
} else if (progress.getUTCMonth()) {
num = progress.getUTCMonth();
var unit = "ヶ月";
} else if (progress.getUTCDate() - 1) {
num = progress.getUTCDate() - 1;
var unit = "日";
} else if (progress.getUTCHours()) {
num = progress.getUTCHours();
var unit = "時間";
} else if (progress.getUTCMinutes()) {
num = progress.getUTCMinutes();
var unit = "分";
} else {}
if (diff < 0) {
var ret = num + unit + "後";
} else if (diff > 0) {
var ret = num + unit + "前";
} else {
var ret = "たった今";
}
return ret;
}
$(function() {
setInterval(function() {
$(".elapsed_time").each(function(i, o) {
var datetime = $(o).attr("data-datetime");
$(o).text(get_elapsed_time(datetime));
});
}, 1000);
});解説
HTMLの方でclassに「elapsed_time」を設定した要素が対象となります。対象の要素のdata-datetimeに入力されている日付を取得して相対的な時間を表示しています。
この例では1秒ごとに更新します。