在前端开发中，我们经常需要处理各种时间相关的任务，比如显示“刚刚”、“1 分钟前”、“3 天前”等。为了方便处理这些任务，我们可以使用一些 JavaScript 库来帮助我们完成这些工作。本文将介绍如何结合使用 jQuery Timeago 或 Moment.js 和 AngularJS。
jQuery Timeago 简介
jQuery Timeago 是一个轻量级的 jQuery 插件，用于格式化时间戳并将其转换为更人性化的形式。它可以自动将时间戳转换为类似“4 小时前”、“2 天前”这样的文本，并且支持多种语言。
Moment.js 简介
Moment.js 是一个广泛使用的 JavaScript 时间库，它提供了许多有用的函数和工具，用于解析、校准、格式化和操作日期和时间。Moment.js 支持多种语言，并提供了大量的插件和扩展。
结合使用 jQuery Timeago 和 AngularJS
要在 AngularJS 中使用 jQuery Timeago，你需要首先引入 jQuery 和 jQuery Timeago。然后，你可以使用 angular.element 函数来获取 Angular 元素对象，并使用 jQuery 的 .timeago() 方法将元素转换为时间格式。
---- -- ------ - ------ ------- ---
------- -----------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
---- - ------- ----- ------ ------- ---
---- ------------- - ---------------
---- - ------- ------------- ---
--- --- - ----------------------- ----
--------------------- ---------- -
------ --------------- -
--- ---- - --- ------------
------ ---------------------
--
---上面的代码演示了如何在 AngularJS 中使用 jQuery Timeago。我们定义了一个名为 timeago 的自定义过滤器，它将时间戳转换为人性化的时间格式。然后，在 HTML 模板中使用 ng-bind 指令绑定时间戳，并使用 | 运算符将其传递给 timeago 过滤器。
结合使用 Moment.js 和 AngularJS
要在 AngularJS 中使用 Moment.js，你需要首先引入 Moment.js 库。然后，你可以使用 angular.element 函数来获取 Angular 元素对象，并使用 Moment.js 提供的函数将元素转换为指定格式的日期和时间。
---- -- --------- ---
------- -------------------------------------------------------------------------------------
---- - ------- ----- --------- ---
---- ------------- - ------------------ -----------------
---- - ------- ------------- ---
--- --- - ----------------------- ----
-------------------- ---------- -
------ --------------- ------- -
--- ---- - --------------
------ --------------------
--
---上面的代码演示了如何在 AngularJS 中使用 Moment.js。我们定义了一个名为 moment 的自定义过滤器，它将时间戳转换为指定格式的日期和时间。然后，在 HTML 模板中使用 ng-bind 指令绑定时间戳，并使用 | 运算符将其传递给 moment 过滤器。
总结
本文介绍了如何结合使用 jQuery Timeago 或 Moment.js 和 AngularJS，以便更方便地处理时间相关的任务。我们提供了示例代码和详细说明，希望能够对你有所帮助。如果你有任何问题或疑问，请留言讨论！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26749