Smart Time Ago 自动生成/更新已过去的时间
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论