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

网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢?
08:15 显示成 "八点过一刻了"
05:45 显示成 "醒醒啦,差一刻就早上六点啦"
14:29 显示成 "快到下午两点半啦"
大家是否觉得上面的时间显示更贴近生活呢? 如果自己处理这样的时间显示会稍微有些麻烦,要是有现成的类库是不是更完美?
今天这里我们介绍的jQuery类库 tidyTime.js 就可以帮助你实现更友好的显示时间的功能,你可以简单的配置和使用即可生成以上的时间显示方式。

如何使用
导入类库:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tidyTime.js"></script>
HTML代码:
<span class="tidyTime"></span>
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);
当然,这个类库还不支持国际化,如果你在中文环境中使用,还需要自己按国人习惯修改一下类库的文字内容,相信也不是一件复杂的事情。希望大家喜欢这个类库!
来源:帮助更语义化的显示时间的jQuery插件 - tidyTime.js
帮助更语义化的显示时间的jQuery插件 - tidyTime.js的更多相关文章
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit
来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...
- 基于特定值来推断隐藏显示元素的jQuery插件
jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值, ...
- Html5语义化标签详解及其兼容性处理
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- HTML语义化之常见模块
用合理的HTML标记以及特有的属性去格式化文档内容. 浏览器会根据标签的语义给定一个默认的样式. 判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读 ...
- 让HTML5语义化标签兼容IE浏览器
解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...
- HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案
一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...
- 浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...
- 腾讯TGideas语义化标签(转)
--------引子--------------- 家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着“臭爸爸”:你让他把鞋穿上,他会提起鞋子往楼下扔...在小孩的 ...
随机推荐
- Eclipse Qt开发环境的建立
1.下载Eclipse目前Eclipse+CDT已经可以集成下载了,好像优化过了,速度还比较快.下载的地址是:http://www.eclipse.org/downloads/,选择“Eclipse ...
- 洛谷 P2947 [USACO09MAR]向右看齐Look Up【单调栈】
题目描述 Farmer John's N (1 <= N <= 100,000) cows, conveniently numbered 1..N, are once again stan ...
- UML对象图、包图
对象图(Object Diagram)显示了一组对象和他们之间的关系.使用对象图阿狸说明数据结构,类图中的类或组件等实例的快照.对象图和类图一样,反应了系统的静态过程,但它是以实际的或原型化为基础来表 ...
- [BZOJ 1855] 股票交易
Link: BZOJ 1855 传送门 Solution: 比较明显的$dp$模型 令$dp[i][j]$为第$i$天持有$j$支股票时的最大利润 对其购买股票和售出股票分别$dp$,这里以购买为例: ...
- 【构造】Codeforces Round #405 (rated, Div. 1, based on VK Cup 2017 Round 1) A. Bear and Different Names
如果某个位置i是Y,直接直到i+m-1为止填上新的数字. 如果是N,直接把a[i+m-1]填和a[i]相同即可,这样不影响其他段的答案. 当然如果前面没有过Y的话,都填上0就行了. #include& ...
- 【状压DP】BZOJ2734-[HNOI2012]集合选数
已经八月份了药丸,开始肝作业并且准备高考啦!! [题目大意] <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集 ...
- [转]java框架spring中的opensessioninview有什么作用
在hibernate中使用load方法时,并未把数据真正获取时就关闭了session,当我们真正想获取数据时会迫使load加载数据,而此时 session已关闭,所以就会出现异常. 比较典型的是在MV ...
- 微信小程序,工具未检测合法域名,400 (Bad Request)错误
1.工具未检测合法域名 这个我就不多说了,如果你新建的时候没有填写AppID的话这个我就不太清楚了 如果新建项目的时候填写了AppID的话,出现这种错误,那你应该去小程序后台 设置->开发者设置 ...
- 最佳实践: 勿在 Servlet 中实现 SingleThreadModel
摘要 请不要实现 SingleThreadModel 接口.这种实践将导致 Web 容器创建多个 servlet 实例:即为每个用户创建一个实例.对于任何大小的应用程序,这种实践都将导致严重的性能问题 ...
- AS3.0 效率优化
1.显示对象:1.1.静态的不需互动的图形,使用Shape对象.(eg:getSize(newShape())=236) 1.2.不需要时间轴的互动图形,使用Sprite对象.(eg:getSize( ...