momentjs基础系列:4.moment方法介绍-4

71 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 22天,点击查看活动详情

上一次掘金的征文活动,准确来说,应该是去年的最后一次掘金官方的征文活动,我没有参加那一次征文活动。距离上一次征文,好像有两三个月了,感觉时间过得有点漫长了,都快要忘记掘金的征文活动了。

现在掘金推出了新的一年的征文活动-掘金日新计划 · 2 月更文挑战,又要开始新的一年,新的一轮的征文挑战了。

征文挑战已经开始了,而我即将要参与这次征文活动,参与挑战,挑战自己。

系列介绍

在提升系类里面,我们在实现获取区间时间的功能效果的时候,我们使用了第三方库-momentjs来实现的。使用了第三方库后,整个功能实现效果就比较简单了。调用momentjs,对应的方法,即可快速实现效果,代码量也少很多。

使用momentjs库来对一些时间进行操作的时候,是非常方便的。正因为如此,打算开一个系列,讲一下怎么使用momentjs这个库。因为momentjs库,里面有很多的方法。有些方法,可能我也没有使用过。所以开这个系列,即是自己温故一遍momentjs库里的方法,同时也写成文章,提供给别人学习参考。希望能对你有帮助。

momentjs

在JavaScript中解析,验证,操作和显示日期和时间

这是momentjs官网上面的介绍,可以使用momentjs来进行日期、时间方面相关的操作。

前言

在上一篇文章里面momentjs基础系列:3.moment方法介绍-3,我们讲解了调用moment方法的时候,第三种传递参数的格式。

接下来,让我们介绍一下moment方法的第四种参数格式。

moment

moment方法,可以创建一个Moment的实例对象出来。

调用moment方法的时候,可以传递多种格式参数。下面我们将介绍一下传递的参数的各种格式。

先创建一个index.html文件,为了演示使用,直接使用html文件来实现即可了。

在html文件里面,通过cdn的方式,引入momentjs

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

这样,就可以在script标签里面,使用moment了。

传递一个时间戳

在调用moment方法的时候,我们也可以传递一个时间戳的参数,来设置时间。

这种方式比较简单,直接把时间戳当作参数传递就可以了。我们用代码实现一下:

  console.log(moment(1675849997018))

到浏览器的控制台查看一下打印结果:

0001.png

我们可以看到,把Moment的实例对象打印出来了。

我们再来思考一下传递时间戳的这种方式:

传递一个时间戳进去,可以把时间设置为对应的时间。

这种方式是不是很熟悉呢?

没错,就是我们平时使用js的Date类的时候,我们传递一个时间戳进去,来获取一个对应的Date实例对象。再进行时间相关的操作。难怪看起来很熟悉。

总结

本小节,主要是介绍了调用moment方法传递参数的第四种格式:传递一个时间戳。

这种方式,和我们使用Date类的时候,传递一个时间戳的方式是一样的。所以看起来,我们也比较熟悉。

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

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