提升系列:2.获取格式化时间-2

215 阅读4分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

提升系列

提升系列,我主要是想写一些平时工作上面,自己会用到的一些好的技巧或者方法。当然,这些技巧和方法是针对我自己的。

除此之外,还可能会写一些解决难点的方法。比如,遇到了某个难点,要通过什么方法来解决它?

正如它的名字一样--提升,通过学习一些好的技巧、方法,或者解决一些难题、难点,来提升我们的能力。

出这个提升系列,一方面,是提升自己的开发能力;另一方面,也希望这个提升系列,可以帮助到部分人,提升他们的开发能力。

在这个系列里,我能想到的或者实现方法,不一定是最好的。欢迎大家参与讨论。

问题

近来登录掘金的时候,掘金推送了系统消息给我

码上掘金挑战赛来了,show出创意赢大奖!

点进去一看,原来掘金要出一个码上掘金挑战赛了,通知我去参加。

不过这没有吸引我的注意,看完标题后,往下看文章作者的头像时,发现名字下面有一排时间

0001.png

我们前端开发的时候,经常会需要处理这些时间。比如后端返回一个时间戳给到我们前端,我们就需要把这个时间戳格式化为我们需要展示的时间。有些后端人可能比较好,会帮我们把时间的格式处理好了,返回给我们前端,我们前端直接使用就好了。但是大部分后端,可能没有这么好心,都是给一个时间戳给到我们前端,需要我们自己处理时间格式了。

前言

在上一篇文章里,我们讲解了怎么处理时间的格式化问题。先是封装了一个formatTime函数,在formatTime函数里处理好时间格式,然后把时间格式返回。

可能有些同学觉得这样太麻烦了,还要自己封装函数,自己写代码逻辑。

那有没有比较简单的方法呢?

有,使用别人封装好的第三方库来解决问题。这里,我打算使用moment.js这个第三方库,来进行时间的格式化。

moment.js

moment.js,进入它的官网moment.js,我们可以看到它的介绍

JavaScript 日期处理类库

moment.js这个依赖库,主要是用来进行日期格式的处理的。

实现

就以掘金上面的时间格式,来作为我们这次实现的目标

0001.png

创建一个index.html文件,在这个文件里实现我们的代码逻辑。

先是通过cdn的方式,引入moment.js。

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.js"></script>

引入moment.js后,会往window对象添加一个moment对象,即我们可以全局使用moment了。

我们查看moment.js官网,可以知道moment.js提供了一个format方法供我们调用,传递的参数为我们想要的时间格式

moment().format('MMMM Do YYYY, h:mm:ss a'); // 九月 6日 2022, 3:08:06 下午
moment().format('dddd');                    // 星期二
moment().format("MMM Do YY");               // 9月 6日 22
moment().format('YYYY [escaped] YYYY');     // 2022 escaped 2022
moment().format();                          // 2022-09-06T15:08:06+08:00

这里,我们想要的是年、月、日、时、分、秒的格式,我们传递以下时间格式进去

YYYY年MM月DD日 hh:mm:ss

通过调用format方法,我们把时间的,,,,,格式获取到了

我们测试验证一下

console.log(moment().format("YYYY年MM月DD日 hh:mm:ss"));

查看打印结果

0003.png

可以看到,时间格式化后打印出来了

放上我们的代码块

小结

本小节,主要是讲解了怎么利用第三方库--moment.js,来实现时间的格式化。

通过调用moment的format方法,来获取时间的年、月、日、时、分、秒,然后按照我们想要的格式来进行输出即可。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》