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

J.sky

Moment.js

Day.js

2023/5/16

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

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

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

Moment.js

首先引入相关库的CDN：

moment.min.js主要的程序依赖库。
moment-with-locales.min.js 国际化的语言支持。
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" ></script>

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就可以了。然后就可以完美运行了，具体效果抬头看下文章标题下边就行啦。

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

Moment.js

Day.js

相关文章