新闻动态

   

您现在的位置是:首页 » 新闻动态 » 网站技术


timeago.js自动将时间戳转换为更易读的时间轴


人气: 3688  日期: 2012-12-26  作者: 大向网络  [打印本文]

timeago.js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成

如:5分钟前,约3小时前这样的更友好易读的时间轴,

而且使用timeago.js无需刷新页面即自动更新页面时间的显示。 点击这里查看演示

 

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"></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,

那么可以通过以下方式来获取准确的北京时间。

  <!--先减去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> 

更多相关信息请浏览timeago.js的官方网站:http://timeago.yarp.com/


  上一篇:ASPCMS如何实现对文章的随机调用?
  下一篇:html5自带得表单验证代码 做验证再也不用那么复杂了
相关文章(Tags:timeago.js,jQuery)