timeago.js 是一个非常简洁、轻量级、不到
2kb
的很简洁的Javascript库,用来将datetime时间转化成类似于*** 时间前
的描述字符串,例如:“3小时前”。
- 本地化支持,默认自带中文和英文语言,基本够用;
- 之前 xxx 时间前、xxx 时间后;
- 支持自动实时更新;
- 支持npm方式和浏览器script方式;
- 测试用例完善,执行良好;
项目官网地址。关于 react 版本可以看timeago-react,关于Python的版本,可以看 timeago.
刚刚
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
看起来不错
应该加个精华。 这么多精华浪费在广告上,好东西往往没有精华。
我用过,不怎么样,代码太啰嗦。自己写个就10行。 From Noder
挺简单的功能这样一来是不是有点得不偿失。。自己写也就10-20行
你写一个怎样?
你写一个更好的啊。
一堆垃圾广告你们上去舔菊,一个人努力的做事,你们吹毛求疵,都什么人?
@magicdawn 什么人都有,我就不会跟这种人有任何交集 自豪地采用 CNodeJS ionic
学习
来自酷炫的 CNodeMD
谁要跟你有交集? 有意思。
我问一下,nodeclub的代码写的好吗? 如果不好,为什么不给一个更好的啊。 我以为你们的态度是一致的,如果不一致,不就是舔菊吗?
按理说以你们这么高的要求,应该将nodeclub的代码批评的体无完肤才对。 不过我看到了你们的宽容,我为什么总觉得好像那里不对呢?
ban不ban无所谓。权力属于某些管理员。
我的意思是要有社区条例, 辱骂他人这种啊~ 该 ban 得 ban ~ 连 GitHub 都有 block 了 😂
我支持你。 不过我说的应该是事实。 如果有更文明的词你也可以帮我想想。 往往这么low的动作在中文里很难找到合适的词吧。
@calidion 没说不好,好代码也不一定适合别人用。。上面的代码我看了,功能性的代码也就几十行,不算太难而且不是特别常用的一个功能搞的还兼容前后端,还整个多语言,我评论一句得不偿失就得写一个更好的?写不出来更好的我是不是就得跪添?
你说不好,也是没有关系的。 关键在于你好与坏的标准没有。 如果你有好与不好的标准,那么按你的标准来,这是不好的,那是好的。 但是我似乎没有见到这种标准。 同样的东西,一个说不好,一个说好。 这就是你的问题。
@calidion 每个人的标准不一样,可能你觉得它好,我觉得它不好。我没有阻止别人说它好,那么你为什么要阻止我说它不好呢?再请问你有好与不好的标准吗?
用moment的飘过
@zouzhenxing @eyblog 自己用起来挺好的,支持相对时间、locale、时间string和Date,10行真的完成不了。 10行勉强可以完成:
- 支持Date类型
- 一种语言
但是这样的话,其实就是每个项目你都需要写一遍,如果需要支持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 根本不管他们~