使用Moment.js或Day.js对HTML页面上的时间进行格式化

作者:J.sky · 发表于: · 更新于: · Tag: Moment.js Day.js

一直想对博客页面的时间进行格式化，把标准的时间格式修改成XX时间前或相对时间，因为时间已经直接输出到了页面DOM中，所以考虑直接使用相关的js库来实现比较方便，搜了一下发现二个JavaScript的时间处理库比较不错，他们是：Moment.js和Day.js。

使用相关库里处理后的时间显示效果：

范围	Key	示例输出
0 到 44 秒	s	几秒钟前
取消设置	SS	44 秒前
45 至 89 秒	m	一分钟前
90 秒到 44 分钟	mm	2分钟前... 44 分钟前
45至89分钟	h	一小时前
90 分钟到 21 小时	hh	2小时前 ... 21 小时前
22 至 35 小时	d	一天前
36 小时至 25 天	dd	2天前 ... 25天前
26至45天	M	一个月前
45至319天	MM	2个月前 ... 10个月前
320 至 547 天（1.5 年）	y	一年前
548天+	yy	2年前 ... 20年前

这样的看起来更人性化，好了，开搞。

Moment.js

首先引入相关库的CDN：

moment.min.js主要的程序依赖库。
moment-with-locales.min.js 国际化的语言支持。

DOM结构：

<small class="cr-time">2019-12-30 16:25:07</small>

jQuery代码更方便一些：

moment.locale('zh-CN');//设置为中文
$(function () {
    $('.cr-time').each(function (i, e) {
        $(e).text(moment($(e).text()).fromNow())
    });
});

至此 moment格式化时间的配置都搞定了，但是，我发现moment官网已经开始劝退了，一下引用官网的原话：

Moment 团队对这些问题进行了详细讨论。我们认识到许多现有项目可能会继续使用 Moment，但我们不希望在未来的新项目中使用 Moment。我们现在普遍认为 Moment 是处于维护模式的旧项目。它没有死，但它确实结束了。

好家伙，我确实是都调试好了，都发布上线了，才看了一眼官网的首页，好吧我认了，看看推荐那些替代了？看到了：Day.js。

Day.js 旨在成为 Moment.js 的极简替代品，使用类似的 API。它不是直接替代品，但如果您习惯使用 Moment 的 API 并希望快速上手，请考虑使用 Day.js。

那就用Day.js来替换吧，整个替换过程很快，因为他们的属性方法都一样，只做了写小改动即可。

Day.js

引入CDN ：

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/plugin/relativeTime.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/locale/zh-cn.js"></script>

这里自上而下的是：主程序库、relativeTime插件库和国际化的库。DOM的结构不变和上边的一样。

jQuery代码：

dayjs.locale('zh-cn')// 设置中文
dayjs.extend(window.dayjs_plugin_relativeTime)
$(function () {
    $('.cr-time').each(function (i, e) {
        $(e).text(dayjs($(e).text()).fromNow())
    });
});

其他就是把库的名称由moment换成了dayjs就可以了。然后就可以完美运行了，具体效果抬头看下文章标题下边就行啦。