这款时间控件,实用价值很高。代码比较干净,无外链。效果很完善。
HTML
首先需要载入jQuery库和timeago.js
1 2 | < script type = "text/javascript" src = "jquery.js" ></ script > < 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 2 3 | $( function (){ $( ".timeago" ).timeago(); }); |
以下方法也可以调用timeago():
1 2 3 4 5 | $( 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。
1 | jQuery.timeago.settings.allowFuture = true ; |
补充说明
timeago.js在标准的UTC时间模式下运行,对于我们处在东八区(+08:00),可以在加载时间时减去8小时,或者在时间格式中使用+08:00来显示准确的北京时间。
举个栗子,假设要处理的是北京时间2012-12-10 18:02:45,那么可以通过以下方式来获取准确的北京时间。
1 2 3 4 | <!--先减去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> |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com