帮助更语义化的显示时间的jQuery插件 - tidyTime.js

以你之姓@ 2021-11-10 13:30 185阅读 0赞

日期：2013-8-8  来源：[GBin1.com][]

![帮助更语义化的显示时间的jQuery插件 - tidyTime.js][jQuery_ - tidyTime.js]

网站或者web应用开发过程中，难免会遇到需要展示时间的地方，例如，留言时间或者发布帖子的时候，那么大家是不是相关过使用更加符合语义学的方式来显示时间呢？

08:15  显示成  "八点过一刻了"

05:45  显示成  "醒醒啦，差一刻就早上六点啦"

14:29  显示成  "快到下午两点半啦"

大家是否觉得上面的时间显示更贴近生活呢？ 如果自己处理这样的时间显示会稍微有些麻烦，要是有现成的类库是不是更完美？

今天这里我们介绍的jQuery类库 **[tidyTime.js][]** 就可以帮助你实现更友好的显示时间的功能，你可以简单的配置和使用即可生成以上的时间显示方式。

![帮助更语义化的显示时间的jQuery插件 - tidyTime.js][jQuery_ - tidyTime.js 1]

## 如何使用 ##

导入类库：

HTML代码：

JS代码：

$(document).ready(function ($) {     $('.tidyTime').tidyTime();	  });

如果你需要选项，可以按如下方式处理：

$('.tidyTime').tidyTime({
    		time: '08:15',
    		before:'It\'s ',
    		after:' and I\'m feeling good!',
    		periodOfDay: true,
    		callback:tidyTimeFunction
    	});

最后，大家也可以把tidyTime.js作为时钟来使用，只要调用setInterval即可，如下：

//Jquery
    var tidyTime = $('.tidyTime');
    tidyTime.tidyTime({
    		before:'Hey dude! It\'s ',
    		after:' and I\'m feeling good!'
    	});
    
    setInterval(function(){
    
    	tidyTime.tidyTime({
    		before:'Hey dude! It\'s ',
    		after:' and I\'m feeling good!'
    	});
    
    },30000);

当然，这个类库还不支持国际化，如果你在中文环境中使用，还需要自己按国人习惯修改一下类库的文字内容，相信也不是一件复杂的事情。希望大家喜欢这个类库！

> 网站地址：[http://git.aaronlumsden.com/tidytime.js/ ][tidyTime.js]

### 来源：[帮助更语义化的显示时间的jQuery插件 - tidyTime.js][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/jquerynews/20130808-friendly-way-displaying-time-tidytimejs/
[jQuery_ - tidyTime.js]: http://www.gbin1.com/technology/jquerynews/20130808-friendly-way-displaying-time-tidytimejs/title.jpg
[tidyTime.js]: http://git.aaronlumsden.com/tidytime.js/
[jQuery_ - tidyTime.js 1]: http://www.gbin1.com/technology/jquerynews/20130808-friendly-way-displaying-time-tidytimejs/1.jpg