开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天,点击查看活动详情
上一次掘金的征文活动,准确来说,应该是去年的最后一次掘金官方的征文活动,我没有参加。距离上一次征文,好像有两三个月了,感觉时间过得有点漫长了,都快要忘记掘金的征文活动了。
现在掘金推出了新的一年的征文活动-掘金日新计划 · 2 月更文挑战,又要开始新的一年,新的一轮的征文挑战了。
征文挑战已经开始了,而我即将要参与这次征文活动,参与挑战,挑战自己。
前言
以前我发布了一个新的系列-提升系列,该系列只是发表了几篇文章,但是没有完结。在本次的征文活动里,我打算就以提升系列为主了,继续写和提升系列有关的文章。
接下来,我们要做一个怎么显示一个区间范围的时间的效果。
提升系列
提升系列,我主要是想写一些平时工作上面,自己会用到的一些好的技巧或者方法。当然,这些技巧和方法是针对我自己的。
除此之外,还可能会写一些解决难点的方法。比如,遇到了某个难点,要通过什么方法来解决它?
正如它的名字一样--提升,通过学习一些好的技巧、方法,或者解决一些难题、难点,来提升我们的能力。
出这个提升系列,一方面,是提升自己的开发能力;另一方面,也希望这个提升系列,可以帮助到部分人,提升他们的开发能力。
在这个系列里,我能想到的或者实现方法,不一定是最好的。欢迎大家参与讨论。
问题
我们在项目开发的时候,可能会遇到这种需求,需要显示今天到前面几天这个时间区间。如果你不好想象或者理解的话,我给你找下展示示例。随便浏览一下网页,没找到我想要说的需求效果。我想着,一些组件库里说不定就有很好的示例。我到elementui组件库里查看一下,发现它的日期时间选择器就很好地展示了我想要展示的效果。
分析
javascript有一个内置的Date类,这个类的原型上有很多时间相关的方法/api。我们可以使用这些方法,来进行一些时间的操作。比如获取时间,或者设置时间。我们可以通过Date类来获取当前时间或者指定某一天的时间。但是,这一天的时间,再往前几天的时间,比如前七天,这天是几月几号,又要怎么获取呢?
我们就以7天时间区间来进行分析好了。我们可以创建一个Date类的实例对象,来获取当前时间或者当前时间的天数。如果当前时间天数大于7,那么很好处理。当前天数减去7,就是前7天的天数。但是如果当前时间天数小于7,前7天就会到上一个月去了。问题也很好处理,7减去当前天数,就可以得到上个月的剩余天数。用上一个月的总天数减去剩余天数,就可以获取到上个月的天数了。
我们用伪代码来进行说明一下
当前天数 > 7
前7天 = 当前天数 - 7
当前天数 < 7
上月剩余天数 = 7 - 当前天数
上月天数 = 上月总天数 - 上月剩余天数
这里就有一个问题了,每个月的天数是不固定的。它不像月份一样,每年都是固定的12个月。天数有可能是31天、30天、28天、29天等。每个月的天数都是不固定的,这时候就比较麻烦了,javascript的Date类也没有提供对应api或获取每个月的天数。
问题好像可以得到解决,接下来我们就介绍一下我们将要用到的api
setDate
我们到MDN上,查看一下setDate的介绍
描述
如果
dayValue超出了月份的合理范围,setDate将会相应地更新Date对象。例如,如果为
dayValue指定 0,那么日期就会被设置为上个月的最后一天。如果 dayValue 被设置为负数,日期会设置为上个月最后一天往前数这个负数绝对值天数后的日期。-1 会设置为上月最后一天的前一天(译者注:例如当前为 4 月,如果 setDate(-2),则为 3 月 29 日)
测试
创建文件
创建一个index.html文件,我们将在这个文件里进行代码测试。调用setDate api,看下该api的效果怎么样。
let date = new Date()
我们先创建一个Date的实例对象,一会我们将要使用到该实例对象的一些api来获取时间相对应的内容。
console.log("date", date.getDate())
我们先调用Date的实例对象的getDate方法,来获取当前时间在本月的月份天数。
我们到浏览器控制台查看一下
接着,我们使用Date实例对象的setDate方法,传递一个参数0。
date.setDate(0)
console.log("date", date.getDate())
我们到浏览器控制台查看一下
打印的天数是31。
上面介绍setDate api的时候,已经说过了,如果调用setDate方法,传递参数是0时,那么日期就会被设置上一个月的最后一天。
小结
我们来对本篇文章来进行一些总结:
本小节主要是介绍了Date的setDate方法,调用setDate方法,如果传递的参数是正数,那么时间被设置当前月份的某一天天数;如果传递的参数是0,那么日期就会被设置上一个月的最后一天。