timeago.js是一个非常简洁、轻量级、不到 2kb 的很简洁的Javascript库,用来将datetime时间转化成类似于*** 时间前的描述字符串,例如:“3小时前”。
- 本地化支持,默认自带中文和英文语言,基本够用;
- 之前 xxx 时间前、xxx 时间后;
- 支持自动实时更新;
- 支持npm方式和浏览器script方式;
- 测试用例完善,执行良好;
在线预览 下载
中文版的模糊时间的显示格式如下:
刚刚 12秒前 3分钟前 2小时前 4天前 3周前 6月前 3年前12秒后 3分钟后 2小时后 24天后 6月后 3年后
使用方法
在页面中引入timeago.min.js文件。
<script src="path/to/timeago.min.js"></script>
使用timeago
类的方法如下:
var timeago = timeago(); timeago.format('2016-09-10')
高级特性
1. 设置相对日期
timeago
默认是相对于当前事件的,当然也可以自己设置相对的时间,如下所示:
var timeago = timeago('2016-06-10 12:12:12'); // 在这里设置相对时间 timeago.format('2016-06-12', 'zh_CN');
2. 格式化时间戳,字符串
timeago().format(new Date().getTime() - 11 * 1000 * 60 * 60); // will get '11 hours ago'
3. 自动实时渲染
HTML代码为:
<div class="need_to_be_rendered" data-timeago="2016-09-10 09:20:00"></div>
Js代码为:
timeago().render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN'); // 或者 timeago().cancel()
API方法render
可以传入一个DOM节点或者数据,标示需要实时渲染这些节点。
API方法cancel
调用之后会清除所有的定时器方法,并且释放所有定时器资源。
被渲染的节点必须要有data-timeago
属性,属性值为日期格式的字符串。
4. 本地化
默认的语言是英文en
, 这个库自带语言有en
和zh_CN
(英文和中文)。
var timeago = timeago(); timeago.format('2016-06-12', 'zh_CN');
可以在构造函数中传入默认语言,也可以调用setLocale
方法。
var timeago = timeago(null, 'zh_CN'); // 或者 timeago.setLocale('zh_CN');
5. 注册本地语言
你可以自定义注册你的语言. 如下所示,所有的键值都必须存在,不然可能会出错。
// 本地化的字典样式 var test_local_dict = function(number, index) {// number: xxx 时间前 / 后的数字;// index: 下面数组的索引号;return [['just now', 'a while'],['%s seconds ago', 'in %s seconds'],['1 minute ago', 'in 1 minute'],['%s minutes ago', 'in %s minutes'],['1 hour ago', 'in 1 hour'],['%s hours ago', 'in %s hours'],['1 day ago', 'in 1 day'],['%s days ago', 'in %s days'],['1 week ago', 'in 1 week'],['%s weeks ago', 'in %s weeks'],['1 month ago', 'in 1 month'],['%s months ago', 'in %s months'],['1 year ago', 'in 1 year'],['%s years ago', 'in %s years']][index]; };var timeago = timeago(); timeago.register('test_local', test_local_dict);timeago.format('2016-06-12', 'test_local');