momentjs基础系列13.hour方法

81 阅读3分钟

四月的更文活动开始了,回头一看,我也好久没有写文章了。因为近来工作比较忙,每天有很多事情要处理。特别是在项目开发的时候,遇到很多的问题或者bug。修复或者处理这些问题或者bug,也是花费了我很多的时间。

现在更文活动开始了,我要抽空写一下文章了,参与更文活动。

四月,我来了。

系列介绍

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

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

momentjs

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

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

前言

在上一篇文章里面momentjs基础系列12.minute方法,我们讲解了Moment对象上的minute方法。调用该方法,我们就可以设置时间的分钟或者获取时间的分钟。

接下来,我们将介绍一下Moment对象上面的hour方法。

moment

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

调用moment方法的时候,可以传递多种格式的参数。

下面让我们来介绍一下传递的参数的各种格式。

引入momentjs

我们想要使用momentjs,需要先把momentjs的包引入进来。

我这里是打算使用一个html文件,在这个html文件里写逻辑代码的,来写我们的演示案例。而不是通过创建项目工程化的方式,来创建项目案例。所以我打算通过cdn的方式,来在html文件里,引入momentjs。

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

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

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

引入momentjs之后,它会全局挂载。这样,我们就可以在script标签里面,直接可以使用moment了。

hour

我们使用moment()方法创建一个Moment实例对象,在Moment实例对象上面,我们可以使用一个hour方法。使用hour方法,我们可以获取到时间或者进行设置时间的小时。

接下来,就让我们用代码来实现一下:

获取
console.log(moment("2023-02-10").hour());

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

0001.png

在浏览器的控制台我们可以看到,打印的值为0。

这是因为调用hour方法的时候,如果我们没有传递小时的值,那么它是按默认值0来进行处理。

赋值

我们进行赋值一下

 console.log(moment("2023-02-10").hour(5).hour())

我们先使用hour方法来进行赋值,然后再利用hour方法来获取值。

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

0002.png

我们可以看到,打印的结果为5。这是因为我们设置的小时值为5,所以打印出来的值就是5了。

小结

本小节,主要介绍Moment对象的hour方法:可以使用hour方法,来获取或者设置时间的小时。

本小节比较简单,相信大家很快就能掌握和理解。

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

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