您的位置:首页 > 设计资讯 > IT网络 > 内页

时间轴插件Timeago使用介绍:几分钟前几小时前几天前

核心提示: timeago js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成如:5分钟前,约3小时前这样的更友好易读的时间轴,而且使用timeago js无需刷新页面即自动更新页面时间的显示。

timeago.js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成如:5分钟前,约3小时前这样的更友好易读的时间轴,而且使用timeago.js无需刷新页面即自动更新页面时间的显示。

timeago.js在标准的UTC时间模式下运行,对于我们处在东八区(+08:00),可以在加载时间时减去8小时,或者在时间格式中使用+08:00来显示准确的北京时间。

HTML

首先需要载入jQuery库和timeago.js

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

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

接着我们在页面中加入以下代码:

 

我们给abbr元素设置class为timeago,设置title为标准的ISO 8601时间格式,你也可以使用html5标签time:

 

jQuery

使用jQuery调用timeago(),运行页面即可看到效果。

$(function(){

$(".timeago").timeago();

});

以下方法也可以调用timeago():

$(function(){

jQuery.timeago(new Date()); //=> "约1分钟前"

jQuery.timeago("2012-12-09"); //=> "1天前"

jQuery.timeago(jQuery("abbr#some_id")); //=> "1年前" // [title="2011-11-20"]

});

timeago.js还支持处理将来的时间,如“3天后”,只需将以下参数设置为true。

jQuery.timeago.settings.allowFuture = true;

补充说明

timeago.js在标准的UTC时间模式下运行,对于我们处在东八区(+08:00),可以在加载时间时减去8小时,或者在时间格式中使用+08:00来显示准确的北京时间。

举个栗子,假设要处理的是北京时间2012-12-10 18:02:45,那么可以通过以下方式来获取准确的北京时间。

 

 

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:design_news
扫一扫 订阅最新资讯
回到顶部