了解一下Timeago插件

in #timeago5 years ago

前天的帖子中介绍了Jdenticon、Identicon,除了比较好玩的头像以外,steemd还有个有意思的特色,就是时间的显示。


(图源 :pexels.com)

比如从steemd的页面查看我的操作,会发现各种操作的时间并不是显示成2018-11-06 xx:xx:xx的样子,而是显示成xx秒之前、xx分钟之前、xx小时之前

并且,随着在页面上停留,即便没有刷新页面,这个时间也会不断更新,尤其是在刚刚操作后,操作时间还是几秒几分钟之前,更为明显。

这么好玩的特色是如何实现的呢?在一通搜索之后,我发现了timeago这个 jQuery 插件,Github地址为:https://github.com/rmm5t/jquery-timeago。

Github上关于Timeago的介绍

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago") from ISO 8601 formatted dates and times embedded in your HTML (à la microformats).

使用起来也很简单,首先加载timeago插件

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>

然后在HTML代码中,需要按这样规则显示时间的地方和timeago关联上

<time class="timeago" datetime="2011-12-17T09:24:17Z">December 17, 2011</time>

除此之外,还需要附加这段代码在HTML中,以便在文档加载完成后触发timeago功能

<script type="text/javascript">
jQuery(document).ready(function() {
$("time.timeago").timeago();
});
</script>

好了,现在页面上的上述HTML就会被自动修改为类似如下的样子:

<time class="timeago" datetime="2011-12-17T09:24:17Z" title="December 17, 2011">about 1 day ago</time>

是不是很神奇啊?Timeago的更多功能和设置,等你自己来发掘哦。

参考链接


Vote For Me As Witness
https://steemit.com/~witnesses type in oflyhigh and click VOTE

Vote @oflyhigh via Steemconnect
Thank you!

Sort:  

确实很有趣,我每次都是 Mouse hover over 来确认真实的 timestamp,原来是用这个实现的。

是呀,挺好玩的

这种显示我其实很烦,尤其是开发测试的时候。

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70601.40
ETH 3576.96
USDT 1.00
SBD 4.75