日期:2013-8-8 来源: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);
当然,这个类库还不支持国际化,如果你在中文环境中使用,还需要自己按国人习惯修改一下类库的文字内容,相信也不是一件复杂的事情。希望大家喜欢这个类库!
相关推荐
2. **jQuery Cookie Plugin**: `jquery.cookie.js`是jQuery的一个插件,用于处理浏览器的Cookie。这个插件允许开发者方便地读取、设置和删除Cookie,这对于实现用户会话管理、个性化设置等功能非常有用。 3. **...
1、jQuery是一个快速的,简洁的,轻量级的javaScript库(压缩后只有21k),这是其它的js库所不及的。 2、代码简练、语义易懂、学习快速、文档说明丰富、各种应用也说得很详细。 3、WRITE LESS,DO MORE,写更少的代码,做...
然而,为了实现更个性化的设计,开发者可能希望摆脱这些预设样式,这正是这个Demo的目标。`jqm.structure.css`和`you-jqm-themes.css`是替代的样式文件,它们可能包含了对默认主题的修改或完全自定义的样式规则,...
这些语义化标签在现代浏览器中能帮助提升网站的结构和可读性,但在缺乏原生支持的IE中,它们会被当作普通的`<div>`处理。通过引入`html5.js`,开发者可以确保这些新标签在IE上也能正常工作。 响应式设计的核心理念...
此外,对于动态加载的内容,该版本提供了更强大的异步数据绑定支持,确保页面内容在任何时候都能正确显示。 总的来说,jQuery Mobile 1.2.0-rc.1是一个重要的里程碑,它在提升性能、增强HTML5支持、扩展触控交互、...
3. **Bootstrap**:Bootstrap是流行的前端开发框架,H-ui.admin利用其栅格系统、组件和JavaScript插件,简化了页面布局和交互设计,提高了开发效率。 4. **jQuery**:jQuery是一个高效、简洁的JavaScript库,它简化...
在自然语言处理领域,文本分词是至关重要的第一步,它涉及到对一段文本进行细粒度的分析,将连续的字符序列分割成具有独立语义的词汇单元,为后续的语义理解、情感分析、信息检索等任务提供基础。在您提供的资源中,...
- `js` 文件夹中的脚本文件包含 jQuery X-Menu 的主要逻辑。它们负责初始化菜单、处理用户交互和动画效果。 - 开发者可以通过在页面中引入这个脚本文件,并调用相应的初始化方法来使用 jQuery X-Menu。 7. **...
1. `jquery.details.js`: 插件的核心JavaScript文件,实现了`<details>`和`<summary>`元素的功能和ARIA支持。 2. `jquery.details.css`: 可能存在的CSS文件,用于样式化`<details>`和`<summary>`元素,使其在视觉上...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 然后,我们可以编写jQuery代码来添加交互性。例如,实现当鼠标悬停在菜单项上时,该菜单项的背景颜色变化: ```javascript $(document)...
jquery.form.js是一款基于jQuery的扩展插件,用于以AJAX方式提交表单。在本篇文章中,我们将详细探讨该插件所提供的方法以及它们的用法和选项。 首先,我们需要了解插件的基本使用方法。通过调用`.ajaxForm()`方法...
5. **可视化**:提供本体的图形化视图,帮助理解复杂的关系网络。 总之,Protege 5.5.0是一款强大的本体编辑工具,适用于需要进行语义建模和知识表示的项目。通过下载提供的ZIP压缩文件,Windows用户可以便捷地获取...
"SpreadJS 复杂公式语义化-demo" 是一个基于 SpreadJS 库的示例项目,用于演示如何在 Web 应用中实现类似 Excel 的复杂公式处理和计算功能。SpreadJS 是一款强大的 JavaScript 表格控件,由 GrapeCity 公司开发,它...
《jQuery Validation插件详解及其1.19.0版本特性》 jQuery Validation插件是Web开发中用于表单验证的一款强大工具,它以其简洁的API和丰富的功能深受开发者喜爱。在1.19.0这个版本中,我们看到了一些重要的改进和...
2. `jquery.metadata.js`、`jquery.metadata.pack.js`、`jquery.metadata.min.js`:这三个文件是jQuery Metadata的核心源码,分别代表原始未压缩版本、打包版本和压缩后的最小化版本。开发者可以根据项目需求选择...
这些插件与CSS紧密配合,提供了如模态窗口、滑动效果等功能,如`javascript/modules/accordion.js`。 7. **文档完善**:Semantic UI有一个详尽的官方文档,解释了每个组件的用法和API,方便开发者快速上手。此外,...
**jQuery Cycle2** 是一个强大的前端幻灯片插件,它是早期 jQuery Cycle 插件的升级版,专门设计用于在网页上实现优雅的滑动效果。这个插件以易用性和声明性API为核心,旨在为移动设备和桌面用户提供无缝的体验。在 ...
这种分离使得代码更具有语义化,避免了以前版本中的一些混淆。 `vsdoc`文件是Visual Studio的文档注释格式,专门为VS IDE提供代码提示和帮助。在jQuery 1.6.2的vsdoc文件中,包含了所有API的详细说明,开发者在使用...
《星球旋转插件jquery.planetarium.js:构建交互式宇宙漫游体验》 在Web开发领域,为了提供更丰富的用户体验,动态和互动性是不可或缺的元素。jQuery行星仪插件jquery.planetarium.js正是这样一个工具,它允许...
HTML5则提供了更丰富的元素和属性,如、、等,这些可以帮助我们构建更语义化的结构。同时,HTML5的data属性可以用来存储额外的信息,方便JavaScript访问和处理。 在实际应用中,j-accordion插件可能需要与其它库或...