Smart Time Ago 自动生成/更新已过去的时间

  • Z时代
  • 2024-01-10
  • 分类：IT

Smart Time Ago 是一个小小的 jQuery 库，可以智能地更新文档中的相关时间戳，例如 3小时前。

它最初是为 https://pragmatic.ly/

它受另一个 jQuery 插件的启发 http://timeago.yarp.com/，但要给予更多的灵活性和智慧。

Smart Time Ago 自动生成/更新已过去的时间

安装

您可以使用它作为 jQuery 插件，只需要复制 lib/timeago.js 或者 src/timeago.coffee 到你的项目目录里面，然后引入即可：

<script type="text/javascript" src="static/script/timeago.js" ></script>
<script type="text/javascript" src="static/script/locales/timeago.zh-cn.js" ></script>

或者如果您使用 NodeJS，您可以从 NPM 安装它。

$ npm install -g smart-time-ago

为什么聪明？

Smart Time Ago 将在开始时指定的范围内每 60000 毫秒(60秒)检查和更新相对时间。后者，它将检查范围内的最新时间，然后将检查时间间隔调到适当的值。

例如，如果您指定的范围中的最新时间是 2小时前。不需要每 60 秒检查和更新相对时间。相反，智能时间前将自动使检查时间间隔延长到 30 分钟。

规则：

  • 最新时间小于 44 分钟，检查时间间隔将设置为 1 分钟。

  • 最新的时间是 44 到 89 分钟，检查时间间隔将设置为 22 分钟。

  • 最新的时间是 90 分钟到 42 小时，检查时间间隔将设置为 30 分钟。

  • 最新时间超过 42 小时，检查时间间隔为半天。

使用

默认情况下，Smart Time Ago 将在 datatime 属性中使用类 timeago 和 ISO 8601 时间戳继续监视时间元素：

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

您可以在全局调用，例如下面的代码：

$('body').timeago();

它将通过一个 Time Ago 实例来监视所有相对时间元素。

或者您可以在指定的作用域中使用它，如下面的代码：

<div class="timeLables">
 <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>
 <time class="timeago" datetime="2012-07-18T06:51:50Z">about 9 hours ago</time>
</div>
$('.timeLables').timeago();

它将创建一个 Time Ago 实例，使用 timeLables 类更新 div 中的时间元素。

但是，您还可以为每次时间元素分别创建 Time Ago 实例，如下面的代码：

$('.timeago').timeago();

顺便说一句，如果您需要动态添加时间元素到您的文档中，而不需要刷新页面，或者您希望手动刷新时间之前。您可能需要调用 REFRESH 函数来刷新实例，如下所示：

$('.timeago').timeago('refresh');

配置

智能时间前有一些默认配置：

$.fn.timeago.defaults = {
  selector: 'time.timeago',
  attr: 'datetime',
  dir: 'up',
  suffix: 'ago'
};

配置参数

  • time.timeago 是监视和更新的默认选择器。

  • datetime 是放置 ISO 8601 绝对解析时间的默认属性。

  • dir 中的 up 表示作用域中的元素是由 timedesc 显示的。这意味着如果 dir 设置为 up。智能时间前将把第一个元素的时间作为调整时间间隔的最新时间。相反，如果它设置为 down，智能时间前将处理最后一个元素的时间作为新的时间。

在 suffix 中的 AGO 表示智能时间前生成的亲属看起来像 3小时前。如果你希望文本看起来像 3小时以后，你可能需要把 suffix 改为 以后。

当初始化 timeago 时，您可以通过将选项传递给 timeago 函数来更改默认配置，如下所示：

$('.timeago').timeago({
  selector: 'span.timeago',
  attr: 'title',
  dir: 'down',
  suffix: 'from now'
})

相关链接

  • npm 包地址：https://www.npmjs.com/package/smart-time-ago

  • 官网：http://pragmaticly.github.io/smart-time-ago/

以上是 Smart Time Ago 自动生成/更新已过去的时间 的全部内容， 来源链接： utcz.com/p/232513.html

回到顶部