广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    timeago.js自动将时间戳转换为时间轴

    2018-04-05 08:32:34 次阅读 稿源:互联网
    零七广告

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

    之前有文章介绍了使用后端语言PHP来实现的时间戳转换,但是需要手动刷新页面才能更新时间的显示。而如果用户长时间停留在该页面,如浏览微博,就可以用到timeago.js来做自动更新时间了。

    HTML

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

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

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

    1. <abbr class="timeago" title="2012-11-28T11:17:00Z"></abbr> 

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

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

    jQuery

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

    1. $(function(){ 
    2.     $(".timeago").timeago(); 
    3. }); 

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

    1. $(function(){ 
    2.     jQuery.timeago(new Date());             //=> "约1分钟前" 
    3.     jQuery.timeago("2012-12-09");           //=> "1天前" 
    4.     jQuery.timeago(jQuery("abbr#some_id")); //=> "1年前"     // [title="2011-11-20"] 
    5. }); 

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

    1. jQuery.timeago.settings.allowFuture = true

    补充说明

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

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

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

    更多相关信息请浏览timeago.js的官方网站

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告