帮助更语义化的显示时间的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语义化标签(转)
--------引子--------------- 家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着“臭爸爸”:你让他把鞋穿上,他会提起鞋子往楼下扔...在小孩的 ...
随机推荐
- UVALive - 7042 The Problem to Make You Happy 博弈
题目大意:给你一个有向图, Bob 和 Alice 在做游戏,每轮他们走一步,当Bob 和 Alice在同一个点或者 Bob无路可走,Bob输,否则Alice输. 思路:因为在Bob赢的时候存在有环的 ...
- Python中的多进程:fork和multiprocessing
Python的多进程 套路1:os.fork() 先敲段代码: #!/usr/bin/env python3 import os os.fork() print('1111111111') 执行结果: ...
- Unable to find a qt build, to solve this problem specify a qt build
可能路径设置不对,比如大小写错误导致找不到qmake编译器,点击VS工具栏的QT菜单,选择options,指定qt Build所在的路径(qt安装路径),然后点击ok. 这是修改过默认安装路径的
- 洛谷P3391文艺平衡树(Splay)
题目传送门 转载自https://www.cnblogs.com/yousiki/p/6147455.html,转载请注明出处 经典引文 空间效率:O(n) 时间效率:O(log n)插入.查找.删除 ...
- CentOS7网络自动连接
1)在root用户下使用命令"vim /etc/sysconfig/network-scripts/ifcfg-XXX",其中"ifcfg-XXX"的" ...
- 32、Flask实战第32天:优化json数据的返回
接着上节,我们通过jsonify返回json数据非常方便 ... return jsonify({"code": 400, "message": message ...
- RabbitMQ (十一) 消息确认机制 - 消费者确认
由于生产者和消费者不直接通信,生产者只负责把消息发送到队列,消费者只负责从队列获取消息(不管是push还是pull). 消息被"消费"后,是需要从队列中删除的.那怎么确认消息被&q ...
- Ubuntu 16.04LTS 常用软件安装
一.遇到的问题 1.su认证失败 sudo passwd //输入命令,然后修改密码即可 2.移动启动器 gsettings set com.canonical.Unity.Launcher laun ...
- 20162303实验二 Java面向对象程序设计实验报告
北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级: 1623 姓名: 石亚鑫 学号:20162303 成绩: 2分 指导教师:娄家鹏 王志强 实验日期:4月14日 实验密 ...
- python基础之包与logging模块
包 1.什么是包? 包是模块的一种形式,包的本质就是一个含有__init__.py文件的文件夹 2.为什么要有包? 提高程序的结构性和可维护性 3.如何使用包? 导入包就是在导包下的__init__. ...