最佳开源JavaScript Time Ago库

本文概述

• 5. TinyAgo.js
• 4. Livestamp.js
• 3. Smart Time Ago
• 2. Timeago.js
• 1. jQuery Time Ago
• Angular Timeago

在许多Web应用程序和网站上, 你都可以查看日期并轻松阅读日期, 而无需知道今天是星期几, 也可以不知道Juni, April等是25日。在浏览器中, 只需从原始日期, 并创建日期和当前时间不同的可读描述。当你也在网站上时, 它们通常也会动态更新。

如果你想在你的应用程序上实现这样的功能, 建议你为此使用开源库。我们已经收集了5个最出色, 最著名和易于使用的库, 这些库使你能够以以前的格式显示日期。它们全部都达到相同的目的, 并且大多数都要求你以ISO 8601格式在标记中提供日期, 但是作为支持因素以及库的维护程度, 它们在我们的排名中处于不同的位置。好好享受 ！

5. TinyAgo.js

TinyAgo.js不是一个巨大的库, 而是一个很小的实用程序(最小180字节), 用于将时间戳转换为相对时间。如果你不想包含庞大的库来实现简单的操作, 那么这是完美的选择。该库提供了一个函数ago(), 该函数需要一个以毫秒为单位的时间戳记的参数(例如Date.getTime()方法的返回值), 并返回带有相对时间的字符串：

var d = new Date('January 1, 2014');
console.log(ago(d.getTime())); // -> '7 months' (assuming it's August 2014)

如果你希望实现与其他库相同的功能, 则时间元素应显示

<time class="timeago" timestamp="1499014713896">July 2, 2017 </time>

<script>
    $(".timeago").each(function(i, el){
        var element = $(el);

        // Change text of element to a human readable date with ago
        // like 2 minutes, 2 hours
        element.text(ago(element.attr("timestamp")));
    });
</script>

4. Livestamp.js

Github

Livestamp.js是一个非常简单, 简洁的jQuery插件, 它使用JavaScript库Moment.js作为依赖项, 将timeago文本自动更新到带有时间戳的HTML元素。你需要做的第一件事是下载依赖项并在插件之前加载它们。你将需要jQuery(> = 1.7)和Moment.js(> = 1.7)。掌握所有内容后, 将其放在页面中的某个位置：

<script src="jquery.js"></script>
<script src="moment.js"></script>
<script src="livestamp.js"></script>

你无需编写额外的代码即可对其进行初始化。只需使用<span>并将data-livestamp属性设置为所需的Unix时间戳(以秒为单位), 如下所示：

You discovered Livestamp.js <span data-livestamp="1499012147"></span>

3. Smart Time Ago

Github

Smart Time Ago是一个小jQuery库, 用于智能地更新文档中的相对时间戳。 (例如” 3小时前”)。 Smart Time Ago将在开始时指定的范围内每60000毫秒(60秒)检查和更新相对时间。稍后它将检查你示波器中的最新时间, 然后将检查时间间隔调整为适当的值。

默认情况下, Smart Time Ago将继续监视datetime属性中带有timeago类和ISO8601时间戳记的时间元素：

<div id="time-labels">
    <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>
</div>

JavaScript初始化程序需要timeago元素所在的父元素。这意味着你可以提供上下文或整个正文：

// Select context of the time elements
$('#time-labels').timeago();

// Or in all your document
$('body').timeago();

因此, 具有timeago类和datetime属性的每个元素都将自动具有可读的日期描述。例如, 如果你指定的范围内的最新时间是” 2小时前”。无需每60秒检查和更新相对时间。相反, Smart Time Ago会自动将检查时间间隔延长到30分钟。

2. Timeago.js

Github

timeago.js是一个微型库(2kb), 用于格式化具有人类可读日期描述的日期, 例如：” 3小时前”, 没有依赖性。它支持自动更新模糊时间戳记(例如” 4分钟前”或”大约1天前”)。使用此库所需要做的就是加载源脚本：

<script src="dist/timeago.js" type="text/javascript"></script>

然后, 作为标准, 该插件可以在HTML5中的<time>标记上工作, 这意味着你需要使用ISO 8601格式在服务器端格式化日期。插件将以人类可读的格式更新其内容。例如, 你将从文档的服务器端提供以下标记：

<time class="timeago" datetime="2008-07-17T09:24:17Z">
     July 17, 2008
</time>

DOM准备就绪后, 你可以使用JavaScript对其进行初始化：

timeago().render(document.querySelectorAll('.timeago'));

时间元素将更新为：

<!-- The date may change till the current date -->
<time class="timeago" datetime="2008-07-17T09:24:17Z" title="July 17, 2008">
     9 years ago
</time>

1. jQuery Time Ago

Github

Timeago是一个jQuery插件, 可轻松支持自动更新模糊时间戳(例如” 4分钟前”或”大约1天前”)。这是Timeago.js的jQuery版本。使用此库所需要做的就是使用script标签包含jQuery和插件：

<!-- jQuery -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- Timeago -->
<script src="jquery.timeago.js" type="text/javascript"></script>

然后, 作为标准, 该插件可以在HTML5中的<time>标记上工作, 这意味着你需要使用ISO 8601格式在服务器端格式化日期。插件将以人类可读的格式更新其内容。例如, 你将从文档的服务器端提供以下标记：

<time class="timeago" datetime="2008-07-17T09:24:17Z">
     July 17, 2008
</time>

插件加载后, 你将需要对其进行初始化。建议仅将class timeago添加到将使用可读格式进行动态更新的元素, 因此初始化代码如下所示：

$(function() {
    // Initialize timeago on all the <time> elements with the timeago class
    $("time.timeago").timeago();
});

然后, 我们的时间标签将更新为：

<!-- The date may change till the current date -->
<time class="timeago" datetime="2008-07-17T09:24:17Z" title="July 17, 2008">
     9 years ago
</time>

Angular Timeago

此Angular指令/过滤器/服务可用于格式化日期, 以便显示给定时间与现在相比已有多长时间。

React Timeago

React timeago是ReactJs的一个非常简单的组件, 它从与现在相比的日期差中显示出易于理解的描述。 React-timeago是一个非常简单的组件, 它具有日期属性, 并以timeago格式返回具有实时更新日期的跨度。日期将仅根据需要更新。对于每秒少于一分钟的时间戳, 对于每小时最多5分钟的时间戳, 依此类推。 React-TimeAgo进行必要的最少更新。

如果你知道另一个很棒的库, 可以让你在浏览器中以以前的样式设置日期格式, 请在注释框中与社区共享。