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

发布于 2020-04-21 23:47:21 字数 3519 浏览 1898 评论 0

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

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

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

安装

您可以使用它作为 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'
})

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

lee_heart

文章 0 评论 0

往事如风

文章 0 评论 0

春风十里

文章 0 评论 0

纸短情长

文章 0 评论 0

qq_pdEUFz

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文