惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
I
InfoQ
L
LangChain Blog
阮一峰的网络日志
阮一峰的网络日志
Y
Y Combinator Blog
博客园_首页
Martin Fowler
Martin Fowler
宝玉的分享
宝玉的分享
A
About on SuperTechFans
Apple Machine Learning Research
Apple Machine Learning Research
Vercel News
Vercel News
T
The Blog of Author Tim Ferriss
C
Check Point Blog
B
Blog RSS Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Engineering at Meta
Engineering at Meta
B
Blog
爱范儿
爱范儿
Stack Overflow Blog
Stack Overflow Blog
aimingoo的专栏
aimingoo的专栏
WordPress大学
WordPress大学
F
Fortinet All Blogs
月光博客
月光博客
GbyAI
GbyAI

碎言

不懂就别瞎掰掰:【程序员的常识】写的什么玩意? AI 辅助编程下的程序设计与代码编写 使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用 探索编程新境界:MarsCode 助你一臂之力 使用 Next.js 和 Tailwind CSS 搭建静态图片展示站点并部署到 Vercel AI 辅助编程:免费工具的优缺点及官网一览 GitHub push更新总是失败,写个python脚本解决 把博客从GitHub迁移到到了vercel ComfyUI 和 Flux.1 安装与使用教程 Flux.1 入门必知:硬件、环境、模型 Git项目的子文件夹中的内容无法同步到远程仓库的解决方法 blender流体Fluid使用中没有流体、流体穿模等一些问题的解决方法 博客聚合网站:积薪,竟然关闭了! blender日常使用中的一些技巧 虽然只有我自己在用,但还是更新了碎言博客的源代码, 与其在迷茫中困惑,不如在努力中前进 差点忘了我还有一个博客... 秧歌、博客和AI 终于熬到了新手上路 好久没有更新博客了。。。 老妈大腿骨骨折,最近一直在医院护理 Hello, September! Ubuntu开机自动启动Docker容器运行WordPress Docker 简单快速安装部署WordPress Docker下安装MySQL 加碘盐能防核辐射的话,还怕什么核战争? shields.io 一个简洁、一致、清晰的徽章 Ubuntu下使用root登录ssh的设置 GitHub Actions 构建、部署 Next.js项目 我又用回了"IE"--edge
使用Moment.js或Day.js对HTML页面上的时间进行格式化
J.sky · 2023-05-16 · via 碎言

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

  1. moment.min.js主要的程序依赖库。

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

相关网站:

moment.js官方网站 day.js官方网站