最佳开源JavaScript Time Ago库 _Web开发

本文概述

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

< script src="http://www.srcmini.com/jquery.js"> < /script> < script src="http://www.srcmini.com/moment.js"> < /script> < script src="http://www.srcmini.com/livestamp.js"> < /script>

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

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

3. Smart Time AgoGithub
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();

【最佳开源JavaScript Time Ago库】因此, 具有timeago类和datetime属性的每个元素都将自动具有可读的日期描述。例如, 如果你指定的范围内的最新时间是” 2小时前” 。无需每60秒检查和更新相对时间。相反, Smart Time Ago会自动将检查时间间隔延长到30分钟。
2. Timeago.jsGithub
timeago.js是一个微型库(2kb), 用于格式化具有人类可读日期描述的日期, 例如：” 3小时前” , 没有依赖性。它支持自动更新模糊时间戳记(例如” 4分钟前” 或” 大约1天前” )。使用此库所需要做的就是加载源脚本：

< script src="http://www.srcmini.com/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 AgoGithub
Timeago是一个jQuery插件, 可轻松支持自动更新模糊时间戳(例如” 4分钟前” 或” 大约1天前” )。这是Timeago.js的jQuery版本。使用此库所需要做的就是使用script标签包含jQuery和插件：

< !-- jQuery --> < script src="http://www.srcmini.com/jquery.min.js" type="text/javascript"> < /script> < !-- Timeago --> < script src="http://www.srcmini.com/jquery.timeago.js" type="text/javascript"> < /script>

< 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进行必要的最少更新。
如果你知道另一个很棒的库, 可以让你在浏览器中以以前的样式设置日期格式, 请在注释框中与社区共享。