JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

下面是详细讲解“JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享”的攻略。

1. 确定时间差

在实现几分钟前、几小时前、几天前等时间差显示效果之前，首先需要确定时间差。通常我们可以通过获取当前时间和要计算的时间之间的毫秒数，然后将其转换为对应的时间差。

var now = new Date().getTime(); // 当前时间
var targetTime = new Date('2021-09-01 09:30:00').getTime(); // 目标时间
var diff = (now - targetTime) / 1000; // 时间差，单位为秒

2. 根据时间差显示对应的字符串

有了时间差之后，我们可以根据时间差来显示对应的字符串，如几分钟前、几小时前、几天前等。下面是一个根据时间差显示字符串的代码示例：

function getTimeString(diff) {
  if (diff < 60) {
    return '刚刚';
  } else if (diff < 60 * 60) {
    return parseInt(diff / 60) + '分钟前';
  } else if (diff < 24 * 60 * 60) {
    return parseInt(diff / (60 * 60)) + '小时前';
  } else {
    return parseInt(diff / (24 * 60 * 60)) + '天前';
  }
}

console.log(getTimeString(diff)); // 输出：10天前

3. 使用jquery插件

如果你使用jquery，可以考虑使用jquery插件来实现这个功能。下面是一个使用jquery插件timeago来显示时间差的示例：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/jquery.timeago.min.js"></script>
<span class="timeago" datetime="2021-09-01 09:30:00">2021-09-01 09:30:00</span>
<script>
  $('.timeago').timeago();
</script>

在上面的代码中，通过设置class为timeago的span元素的datetime属性来指定要显示的时间，然后通过调用timeago插件来生成对应的时间差字符串。这个插件支持多种语言，并且可以自定义时间差字符串格式。

以上就是“JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享”的完整攻略，希望对你有帮助！