大家好，我是前端实验室的大师兄!
前言
大师兄最近项目中有这样一个需求：用户发送一条消息后，页面显示 “刚刚”，过一会儿变成了“x分钟前”，再过一些时间变成了“x小时前”、“x天前”。
怎么做呢？优秀的小伙伴们肯定都能自己coding出来。但今天大师兄要分享是一个好玩的东东：timeago.js。它就能帮我们搞定！
timeago.js简介
timeago.js 是一个非常简洁、轻量级、不到 2kb 的很简洁的 Javascript 库。作用就是将 datetime 时间转化成类似于*** 时间前的描述字符串，例如：“3小时前”。
特点
本地化支持，默认自带中文和英文语言；
之前 xxx 时间前、xxx 时间后；
支持自动实时更新；
支持npm方式和浏览器script方式；
测试用例完善，执行良好。
使用方法
1. 下载timeago.js
代码语言：javascript复制npm install timeago.js
2. 引入 timeago.js
使用import引入
代码语言：javascript复制// ES6
import timeago from 'timeago.js';
// commonjs
var timeago = require("timeago.js");
或者通过script标签引入到html文件中
代码语言：javascript复制<script src="dist/timeago.min.js"></script>
3. 使用timeago类
代码语言：javascript复制var timeagoInstance = timeago();
timeagoInstance.format('2016-06-12');
4. 自动实时渲染
HTML为
代码语言：javascript复制<div class="need_to_be_rendered" datetime="2017-08-01 21:55:28"></div>
<div class="need_to_be_rendered" data-timeage="2017-08-01 21:55:28"></div>
Js为
代码语言：javascript复制var timeagoInstance = timeago();
timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'));
render方法传入一个或多个节点，表示需要实时渲染这些节点，被渲染的节点必须要有 datetime 或者 data-timeago 属性，属性值为日期格式的字符串。
5. 本地化
默认的语言是英文en, 这个库自带语言en和zh_CN
代码语言：javascript复制var timeagoInstance = timeago();
timeagoInstance.format('2016-06-12', 'zh_CN');
可以在构造函数中传入默认语言，也可以调用setLocale方法。
代码语言：javascript复制var timeagoInstance = timeago(currentDate, 'zh_CN');
// or
timeago().setLocale('zh_CN');
6. 注册本地语言
你可以自己自定义注册register你自己的语言。
代码语言：javascript复制// 本地化的字典样式
var test_local_dict = function(number, index, total_sec) {
// number：xxx 时间前 / 后的数字；
// index：下面数组的索引号；
// total_sec：时间间隔的总秒数；
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 = timeago();
timeagoInstance.format('2016-06-12', 'test_local');
注册自定义语言就比较灵活了。想要什么格式，你说了算！
体验和建议
timeago.js轻量、无依赖、代码精干，能解决类似**之前实时显示的需求！有时间线的场景需求，就再也不用自己造轮子啦! 如果你使用React开发，还有对应的timeago-react组件。大家赶紧来试试吧！
timeago地址 https://timeago.org/
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~进群方式：在下方公众号后台，回复111，按提示操作即可进群。
