js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前

下面是“js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前”的完整攻略：

步骤一：获取时间戳

在开始计算与当前时间相差多久之前，我们需要获取时间戳。时间戳是指自 1970 年 1 月 1 日 00:00:00 UTC 起至现在的总秒数。

我们可以通过 JavaScript 的 Date 对象获取当前的日期时间，然后将其转换为时间戳。示例代码如下：

let time = new Date().getTime(); // 获取当前时间戳

步骤二：计算时间差

得到了时间戳后，就可以开始计算与当前时间相差多久了。只需要将当前时间戳与被比较时间戳相减即可得到两者之间的时间差。

这里需要注意的是，计算出来的时间差是以毫秒为单位的。我们需要将其转换为相应的天数、小时数、分钟数或秒数。示例代码如下：

let diff = (new Date().getTime() - timestamp) / 1000; // 时间差，单位为秒

let day_diff = Math.floor(diff / 86400); // 计算天数
let hour_diff = Math.floor((diff % 86400) / 3600); // 计算小时数
let minute_diff = Math.floor((diff % 3600) / 60); // 计算分钟数
let second_diff = Math.floor(diff % 60); // 计算秒数

步骤三：根据时间差显示字符串

计算出时间差后，我们需要根据不同的时间差显示不同的时间字符串。例如：1 天前、5 小时前等。

这里我们可以使用 JavaScript 的模板字符串语法，结合上面计算出来的时间差，来生成相应的时间字符串。示例代码如下：

let time_str = '';
if (day_diff > 0) {
  time_str = day_diff + ' 天前';
} else if (hour_diff > 0) {
  time_str = hour_diff + ' 小时前';
} else if (minute_diff > 0) {
  time_str = minute_diff + ' 分钟前';
} else {
  time_str = second_diff + ' 秒前';
}

示例详解

下面通过两个示例来详细讲解一下这个攻略。

示例一

假设当前时间是 2021 年 9 月 15 日 14:30:30，我们需要计算出 2021 年 9 月 12 日 16:25:30 距离当前时间相差多久。

第一步，获取时间戳：

let timestamp = new Date('2021-09-12 16:25:30').getTime(); // 1631454330000

第二步，计算时间差：

let diff = (new Date().getTime() - timestamp) / 1000; // 286200
let day_diff = Math.floor(diff / 86400); // 3
let hour_diff = Math.floor((diff % 86400) / 3600); // 21
let minute_diff = Math.floor((diff % 3600) / 60); // 2
let second_diff = Math.floor(diff % 60); // 0

第三步，根据时间差显示字符串：

let time_str = '';
if (day_diff > 0) {
  time_str = day_diff + ' 天前';
} else if (hour_diff > 0) {
  time_str = hour_diff + ' 小时前';
} else if (minute_diff > 0) {
  time_str = minute_diff + ' 分钟前';
} else {
  time_str = second_diff + ' 秒前';
}
console.log(time_str); // 3 天前

示例二

假设当前时间是 2021 年 9 月 15 日 19:30:00，我们需要计算出 2021 年 9 月 15 日 19:29:55 距离当前时间相差多久。

第一步，获取时间戳：

let timestamp = new Date('2021-09-15 19:29:55').getTime(); // 1631742595000

第二步，计算时间差：

let diff = (new Date().getTime() - timestamp) / 1000; // 5
let day_diff = Math.floor(diff / 86400); // 0
let hour_diff = Math.floor((diff % 86400) / 3600); // 0
let minute_diff = Math.floor((diff % 3600) / 60); // 0
let second_diff = Math.floor(diff % 60); // 5

第三步，根据时间差显示字符串：

let time_str = '';
if (day_diff > 0) {
  time_str = day_diff + ' 天前';
} else if (hour_diff > 0) {
  time_str = hour_diff + ' 小时前';
} else if (minute_diff > 0) {
  time_str = minute_diff + ' 分钟前';
} else {
  time_str = second_diff + ' 秒前';
}
console.log(time_str); // 5 秒前

总之，这个攻略可以帮助我们实现类似微信朋友圈中时间显示的效果，让用户更直观地了解信息更新的时间。