timeago.js-将datetime时间转化为模糊时间的js工具库

当前位置:主页 > jQuery库 > 工具类 > timeago.js-将datetime时间转化为模糊时间的js工具库
timeago.js-将datetime时间转化为模糊时间的js工具库
分享:

    插件介绍

    timeago.js是一个非常简洁、轻量级、不到 2kb 的很简洁的Javascript库,用来将datetime时间转化成类似于*** 时间前的描述字符串,例如:“3小时前”。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-10
    阅读:
麦子学院
简要教程

timeago.js是一个非常简洁、轻量级、不到 2kb 的很简洁的Javascript库,用来将datetime时间转化成类似于*** 时间前的描述字符串,例如:“3小时前”。

  • 本地化支持,默认自带中文和英文语言,基本够用;
  • 之前 xxx 时间前、xxx 时间后;
  • 支持自动实时更新;
  • 支持npm方式和浏览器script方式;
  • 测试用例完善,执行良好;

中文版的模糊时间的显示格式如下:

刚刚
12秒前
3分钟前
2小时前
4天前
3周前
6月前
3年前

12秒后
3分钟后
2小时后
24天后
6月后
3年后                  
                

安装

可以通过npm来安装timeago.js插件。

npm install timeago.js                  
                

使用import引入,然后可以得到一个全局变量: timeago

import timeago from 'timeago.js';
// 或者
var timeago = require("timeago.js");                  
                

使用方法

在页面中引入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, 这个库自带语言有enzh_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');                  
                

timeago.js模糊时间js插件的github地址为:https://github.com/hustcc/timeago.js

网友评论