也许是最简洁好用的timeago.js库了
发布于 6 年前 作者 hustcc 10338 次浏览 来自 分享

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

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

项目官网地址。关于 react 版本可以看timeago-react,关于Python的版本,可以看 timeago.

Build Status npm npm npm

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

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

使用方法

1. 下载 timeago.js

npm install timeago.js

2. 引入 timeago.js

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

import timeago from 'timeago.js';

// 或者

var timeago = require("timeago.js");

或者直接通过 script 标签引入到html文件中.

<script src="dist/timeago.min.js"></script>

3. 使用 timeago

var timeago = new timeago();
timeago.format('2016-06-12')

高级特性使用

1. 本地化

默认的语言是英文 en, 这个库自带语言有 en and zh_CN (英文和中文).

var timeagoInstance = new timeago();
timeagoInstance.format('2016-06-12', 'zh_CN');

可以在构造函数中传入默认语言,也可以调用 setLocale 方法。

var timeagoInstance = new timeago('zh_CN');
// or
new timeago().setLocale('zh_CN');

1. 设置相对日期

timeago 默认是相对于当前事件的,当然也可以自己设置相对的时间,如下所示:

var timeagoInstance = new timeago(null, '2016-06-10 12:12:12'); // 在这里设置相对时间
timeagoInstance.format('2016-06-12', 'zh_CN');

2. 格式化时间戳,字符串

new 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-06-30 09:20:00"></div>

Js代码为:

var timeagoInstance = new timeago();
timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');

// or

timeagoInstance.cancel()

API方法 render 可以传入一个DOM节点或者数据,标示需要实时渲染这些节点。

API方法 cancel 调用之后会清除所有的定时器方法,并且释放所有定时器资源。

被渲染的节点必须要有 datetime 或者 data-timeago 属性,属性值为日期格式的字符串。

5. 注册本地语言

你可以自己自定义注册 register 你自己的语言. 如下所示,所有的键值都必须存在,不然可能会出错. e.g.

// 本地化的字典样式
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];
};

timeago.register('test_local', test_local_dict);

var timeagoInstance = new timeago();
timeagoInstance.format('2016-06-12', 'test_local');

欢迎发起 PR 添加一些确实的 locale 语言,当然请注意,在 tests/locales 目录中添加对应的测试用例。

LICENSE

MIT

31 回复

看起来不错

应该加个精华。 这么多精华浪费在广告上,好东西往往没有精华。

我用过,不怎么样,代码太啰嗦。自己写个就10行。 From Noder

挺简单的功能这样一来是不是有点得不偿失。。自己写也就10-20行

@zouzhenxing

你写一个怎样?

@eyblog

你写一个更好的啊。

一堆垃圾广告你们上去舔菊,一个人努力的做事,你们吹毛求疵,都什么人?

@i5ting @alsotang @fengmk2

untitled1.png

有社区条例么? 有 ban 人的功能么? 这种词汇可以 ban 了吧?

@magicdawn 什么人都有,我就不会跟这种人有任何交集 自豪地采用 CNodeJS ionic

学习

来自酷炫的 CNodeMD

@fengmk2

谁要跟你有交集? 有意思。

@magicdawn

我问一下,nodeclub的代码写的好吗? 如果不好,为什么不给一个更好的啊。 我以为你们的态度是一致的,如果不一致,不就是舔菊吗?

按理说以你们这么高的要求,应该将nodeclub的代码批评的体无完肤才对。 不过我看到了你们的宽容,我为什么总觉得好像那里不对呢?

ban不ban无所谓。权力属于某些管理员。

@fengmk2

我的意思是要有社区条例, 辱骂他人这种啊~ 该 ban 得 ban ~ 连 GitHub 都有 block 了 😂

@magicdawn

我支持你。 不过我说的应该是事实。 如果有更文明的词你也可以帮我想想。 往往这么low的动作在中文里很难找到合适的词吧。

@calidion 没说不好,好代码也不一定适合别人用。。上面的代码我看了,功能性的代码也就几十行,不算太难而且不是特别常用的一个功能搞的还兼容前后端,还整个多语言,我评论一句得不偿失就得写一个更好的?写不出来更好的我是不是就得跪添?

@eyblog

你说不好,也是没有关系的。 关键在于你好与坏的标准没有。 如果你有好与不好的标准,那么按你的标准来,这是不好的,那是好的。 但是我似乎没有见到这种标准。 同样的东西,一个说不好,一个说好。 这就是你的问题。

@calidion 每个人的标准不一样,可能你觉得它好,我觉得它不好。我没有阻止别人说它好,那么你为什么要阻止我说它不好呢?再请问你有好与不好的标准吗?

用moment的飘过

@zouzhenxing @eyblog 自己用起来挺好的,支持相对时间、locale、时间string和Date,10行真的完成不了。 10行勉强可以完成:

  1. 支持Date类型
  2. 一种语言

但是这样的话,其实就是每个项目你都需要写一遍,如果需要支持en,获取还需要再写一遍。如果一个开源项目评价的标准是代码行数,那么leftpad也许是最该被处理掉的。

js社区之所以近几年异常活跃,和模块化关小不小吧~~~

@solee0524 moment和jq.timeago我都调用使用过,moment有很多date操作的方法,项目中用不到,jq.timeago依赖jq,而且直接处理到html标签,包括自动实时计算,个人感觉耦合太重。

所以造了这个轮子,专注于timeago

@zouzhenxing @eyblog @calidion @magicdawn 正文最下面补充了一点,不用在无畏争吵。repo首先是为了给自己项目维护方便,其次才是给社区使用。

@hustcc 1、没人跟你争吵,我只是发表我自己的意见。 2、支持开源。 3、在选择库的时候,我有自己的标准。

支持开源 支持奉献精神 给我们这种新手提供了很多轮子

为了造轮子而造轮子

好多人站着说话不腰疼,楼主加油哇

支持开源 <br><br>来自<a href=“https://lzxb.github.io/vue-cnode/” target="_blank">vue-cnode手机版</a>

@yeliex 无所谓了

@hyj1991 根本不管他们~

回到顶部