一款连产品经理都满意的时间格式转换库

程序员老鱼

发布于 2022-12-02 10:56:16

2620

发布于 2022-12-02 10:56:16

大家好，我是前端实验室的大师兄!

前言

大师兄最近项目中有这样一个需求：用户发送一条消息后，页面显示 “刚刚”，过一会儿变成了“x分钟前”，再过一些时间变成了“x小时前”、“x天前”。怎么做呢？优秀的小伙伴们肯定都能自己coding出来。但今天大师兄要分享是一个好玩的东东：timeago.js。它就能帮我们搞定！

timeago.js简介

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

特点

本地化支持，默认自带中文和英文语言；

之前 xxx 时间前、xxx 时间后；

支持自动实时更新；

支持npm方式和浏览器script方式；

测试用例完善，执行良好。

使用方法

1. 下载timeago.js

npm install timeago.js

2. 引入 timeago.js

使用import引入

// ES6
import timeago from 'timeago.js';

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

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

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

3. 使用timeago类

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

4. 自动实时渲染

HTML为

<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为

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

render方法传入一个或多个节点，表示需要实时渲染这些节点，被渲染的节点必须要有 datetime 或者 data-timeago 属性，属性值为日期格式的字符串。

5. 本地化

默认的语言是英文en, 这个库自带语言en和zh_CN

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

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

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

6. 注册本地语言

你可以自己自定义注册register你自己的语言。

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

注册自定义语言就比较灵活了。想要什么格式，你说了算！