来源: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的更多相关文章

  1. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

  2. 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit

    来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...

  3. 基于特定值来推断隐藏显示元素的jQuery插件

    jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值, ...

  4. Html5语义化标签详解及其兼容性处理

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  5. HTML语义化之常见模块

    用合理的HTML标记以及特有的属性去格式化文档内容. 浏览器会根据标签的语义给定一个默认的样式. 判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读 ...

  6. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  7. HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  8. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  9. 腾讯TGideas语义化标签(转)

    --------引子--------------- 家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着“臭爸爸”:你让他把鞋穿上,他会提起鞋子往楼下扔...在小孩的 ...

随机推荐

  1. Eclipse Qt开发环境的建立

    1.下载Eclipse目前Eclipse+CDT已经可以集成下载了,好像优化过了,速度还比较快.下载的地址是:http://www.eclipse.org/downloads/,选择“Eclipse ...

  2. 洛谷 P2947 [USACO09MAR]向右看齐Look Up【单调栈】

    题目描述 Farmer John's N (1 <= N <= 100,000) cows, conveniently numbered 1..N, are once again stan ...

  3. UML对象图、包图

    对象图(Object Diagram)显示了一组对象和他们之间的关系.使用对象图阿狸说明数据结构,类图中的类或组件等实例的快照.对象图和类图一样,反应了系统的静态过程,但它是以实际的或原型化为基础来表 ...

  4. [BZOJ 1855] 股票交易

    Link: BZOJ 1855 传送门 Solution: 比较明显的$dp$模型 令$dp[i][j]$为第$i$天持有$j$支股票时的最大利润 对其购买股票和售出股票分别$dp$,这里以购买为例: ...

  5. 【构造】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& ...

  6. 【状压DP】BZOJ2734-[HNOI2012]集合选数

    已经八月份了药丸,开始肝作业并且准备高考啦!! [题目大意] <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集 ...

  7. [转]java框架spring中的opensessioninview有什么作用

    在hibernate中使用load方法时,并未把数据真正获取时就关闭了session,当我们真正想获取数据时会迫使load加载数据,而此时 session已关闭,所以就会出现异常. 比较典型的是在MV ...

  8. 微信小程序,工具未检测合法域名,400 (Bad Request)错误

    1.工具未检测合法域名 这个我就不多说了,如果你新建的时候没有填写AppID的话这个我就不太清楚了 如果新建项目的时候填写了AppID的话,出现这种错误,那你应该去小程序后台 设置->开发者设置 ...

  9. 最佳实践: 勿在 Servlet 中实现 SingleThreadModel

    摘要 请不要实现 SingleThreadModel 接口.这种实践将导致 Web 容器创建多个 servlet 实例:即为每个用户创建一个实例.对于任何大小的应用程序,这种实践都将导致严重的性能问题 ...

  10. AS3.0 效率优化

    1.显示对象:1.1.静态的不需互动的图形,使用Shape对象.(eg:getSize(newShape())=236) 1.2.不需要时间轴的互动图形,使用Sprite对象.(eg:getSize( ...