首页 | 7267 | 452 | 226 | 添加收藏 上一个 下一个
timeago自动将时间戳转换为更易读的时间轴

这款时间控件,实用价值很高。代码比较干净,无外链。效果很完善。


使用方法


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="2012-11-28T11:17:00Z"></abbr>

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


<time class="timeago" datetime="2012-12-10T02:20:50Z"><

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,那么可以通过以下方式来获取准确的北京时间。


<!--先减去8小时--> 
<abbr class="timeago" title="2012-12-10T10:02:45Z"></abbr> 
<!--在时间后+08:00--> 
<abbr class="timeago" title="2012-12-10T18:02:45Z+08:00"></abbr>