jQuery 基础教程jQuery 简介jQuery 安装jQuery 语法jQuery 选择器jQuery 事件jQuery 隐藏和显示jQuery 效果 -淡入淡出jQuery 效果 -滑动jQuery 效果 animate() 方法jQuery 停止动画 stop() 方法jQuery 动画 callback 回调方法jQuery 方法链 ( chaining )jQuery 获取HTML元素的内容属性jQuery 设置HTML元素的内容属性jQuery - 添加元素jQuery - 删除元素jQuery - 获取并设置 CSS 类jQuery css() 方法jQuery 尺寸jQuery 遍历jQuery 遍历 祖先元素jQuery 遍历 后代jQuery 遍历 - 同胞 ( siblings )jQuery 遍历-过滤jQuery AJAX 简介jQuery AJAX load() 方法jQuery AJAX get() 和 post() 方法jQuery - noConflict() 方法jQuery Validate 验证插件jQuery UI Accordion 折叠菜单jQuery UI Autocomplete 插件jQuery Growl 消息提醒jQuery Password ValidationjQuery Prettydate 友好日期插件jQuery TooltipjQuery 树型菜单插件(Treeview)
jQuery Prettydate 友好日期插件
jquery Prettydate 是一款美化日期的插件，主要功能就是将日期格式化为 “just now”, “5 minutes ago”, “yesterday”, “2 weeks ago”
官网地址
jQuery Prettydate
引入 JavaScript 脚本
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="/static/lib/jquery/prettydate/jquery.prettydate.js"></script>
html 代码
使用 Prettydate 插件，需要在 title 中带有 ISO8601 日期
<p class="date" title="2017-01-28T20:24:17Z">January 28th, 2017</p>
<p class="date" title="2016-01-27T22:24:17Z">January 27th, 2016</p>
<p class="date" title="2015-01-26T22:24:17Z">January 26th, 2015</p>
JavaScript 代码
$(function() { $("p.date").prettyDate(); });
本地化
如需本地化该插件，可以引入 i18n 目录下响应的脚本，
在这里，我们以中文的简体中文为例
这个中文插件有一个小 BUG ... 如果你的显示不正确，可以使用我修改的版本
<script src="/static/lib/jquery/prettydate/i18n/jquery.prettydate-zh-CN.js"></script>该插件每隔 10 秒中更新一次每个被选中的元素。这样子 "just now" 会变为 "1 minute ago" 再变为 "x minutes ago" 再变为 "1 hour ago" 等等。
您可以通过指定 interval 选项为 "false" 来禁用间隔更新：
$(function() { $("a").prettyDate({ interval: false }); });
或者设置一个不同的时间间隔，例如：interval: 1000，每隔一秒更新一次每个被选中的元素
$(function() { $("a").prettyDate({ interval: 1000 }); });
value 选项默认读取 title 属性中的 ISO8601 日期字符串
重载该选项来使用其他属性，例如，一个自定义的 "isodate" 属性
$(function() {
$("a").prettyDate({
function() { // "this" 是 dom 元素
return $(this).attr("isodate");
}
});
});