来源: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. ELK系列--justniffer0.5.12安装报错解决方法

    现象: justniffer的0.5.12(安装后显示0.5.13版本)安装过程中需要升级boost至1.46以上版本,同时在make时会出现如下报错: /opt/Python-2.6.6/Pytho ...

  2. Codeforces 1131 F. Asya And Kittens-双向链表(模拟或者STL list)+并查集(或者STL list的splice()函数)-对不起,我太菜了。。。 (Codeforces Round #541 (Div. 2))

    F. Asya And Kittens time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. JavaScript中的Date类型

    ECMAScript中的Date类型是在早起Java中的java.util.Date类基础上构建的.为此,Date类型使用自UTC(Coordinated Universal Time,国际协调时间) ...

  4. 【状压dp】Travelling

    [hdu3001]Travelling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  5. 【推导】Codeforces Round #411 (Div. 1) A. Find Amir

    1 2 3 4 5 6 7 4-5-3-6-2-7-1 答案是(n-1)/2 #include<cstdio> using namespace std; int n; int main() ...

  6. Problem A: 零起点学算法80——逆序输出(数组练习)

    #include<stdio.h> int main() { ]; scanf("%d",&n); ;i<=n;i++){ scanf("%d& ...

  7. ACM/CF赛制getstart模板

    (包含整型变量快速读入.简易循环和连续容器的迭代器循环的宏定义.调试时的运行时间输出(编译选项应有“DEBUG”宏定义)等)  1 /*================================ ...

  8. 21点游戏java实现

    21点的基本知识 21点是世界上比较流行的扑克游戏项目 除掉大小王的一副扑克牌,共计52张牌 21点不区分花色,其中A----10均代表扑克牌本身的点数J Q K代表10点 区分庄家和闲家,其中闲家可 ...

  9. 8VC Venture Cup 2016 - Elimination Round B. Cards 瞎搞

    B. Cards 题目连接: http://www.codeforces.com/contest/626/problem/B Description Catherine has a deck of n ...

  10. 【转】Geary's C

    李旭,Matlab: Geary's C 原文地址 Introduction Geary's C is a measure of spatial autocorrelation or an attem ...