时间过得真快啊,眨眼之间,又来到了六月份啦。回头一看,从四月份到现在,也差不多快有一个月时间啦。而在这一个月时间里,平时我都是在忙着工作上面的事情,就没有太多时间来写文章了,导致近来没有发什么文章。
现在六月份的更文活动开始了,我已经好久没有写文章了。刚好又有掘金的更文活动,我打算开始写文章了,参与到这次更文活动来。
六月,冲啊。
系列介绍
在提升系列里面,我们在实现获取区间时间的功能效果的时候,我们使用了第三方库-momentjs来实现功能的。使用了第三方库后,整个功能实现效果就比较简单了。调用momentjs库里对应的方法,即可快速实现效果,同时我们的代码量也少很多。
使用momentjs库来对一些时间进行操作的时候,是非常方便的。正因为如此,打算开一个系列,讲一下怎么使用momentjs这个库。因为momentjs库,里面有很多的方法。有些方法,可能平时在开发的过程中我也没有使用过。所以我开这个momentjs基础系列,既是自己温故一遍momentjs库里的方法,同时也写成文章,提供给别人学习参考。希望能够对你有所帮助。
momentjs
在JavaScript中解析,验证,操作和显示日期和时间
这是来自于momentjs官网上面的介绍,我们可以使用momentjs来进行日期、时间方面相关的操作。
前言
在上一篇文章里面momentjs基础系列46.add方法-hours,我们讲解了Moment对象上的add方法。调用该方法,可以为现有的moment实例对象增加时间。
我们已经介绍了调用add方法时,传递参数:hours的用法了。
接下来,我们将继续介绍一下调用add方法时,传递其它的参数。
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了。
add
在Moment实例对象上面,有一个add方法。我们可以使用add方法,为现有的moment实例对象增加时间。
这么说可能有点抽象或者不好理解,让我们用一个小案例来解释一下。看完这个小案例,你就会理解了。
用法介绍
我们先调用moment()方法,得到一个moment实例对象。然后再调用它的add方法。
若要增加时间,则传入要增加的时间的键,以及要增加的数量。
moment(时间).add(Number,String)
参数介绍:
- 参数一(Number):你要增加时间的数值
- 参数二:你想要增加哪部分的时间的值,比如年、月、日、时、分、秒等等
接下来,我们将会对每个参数都进行演示和讲解一遍。让大家对这些参数有更好的理解。
minutes
当我们调用moment实例对象上的add方法时,传递参数为minutes时,是增加时间的分钟数。
我们用代码示例来进行演示一下
console.log(moment("2023-02-10").add(1, "minutes"));
上面代码,我们先是调用moment方法,传递一个时间进去。得到了一个moment实例对象后,调用它的add方法,把对用传递参数进去。
第一个参数为1,代表着我们想要对时间增加1。第二个参数为minutes,代表着我们要修改时间的小时的数值。结合起来,就是我们要对moment实例对象的时间的分钟数增加一个小时。
到浏览器的控制台,我们查看一下代码执行后打印的结果
在浏览器的控制台里面,我们可以看到,有一个moment的实例对象。在这个moment实例对象上,有一个属性_d,在这个属性里,我们可以看到2023,这是moment实例对象的年份,再后面,我们可以看到有一个数字01,就是moment实例对象的分钟数了。通过前面系类文章的学习,我们可以知道,如果我们没有设置moment实例对象的分钟数值的时候,它默认是0。而现在打印出来的分钟数为01,确实增加了一分钟,验证结果是正确的。
小结
本篇文章小结:
本小节主要是讲解了moment对象上的add,它的用法以及它的作用。
我们可以使用moment对象上面的add方法:使用add方法的时候,当我们传递参数为minutes时,可以为现有的moment实例对象增加它的分钟数的时间。
本小节相对来说比较简单,相信大家很快就能掌握和理解它的。
最后,放上自己比较喜欢的一句诗句:
千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》