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

107 阅读4分钟

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

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

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

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

提升系列

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

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

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

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

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

前言

在我的上一篇文章提升系列:7.获取格式化时间区间-2-1里,主要是介绍了Date类相关的知识。同时我们也查阅MDN资料发现,我们在new 一个Date的实例对象的时候,可以不传递参数,也可以传递参数进去。参数可以传递年、月、日、时分等。创建的Date实例对象,就会被设置为传递参数的时间。

我们将要利用该特性,来实现获取前7天时间的功能。

实现效果

我们在项目开发的时候,可能会遇到这种需求,需要显示今天到前面几天这个时间区间。如果你不好想象或者理解的话,我给你找下展示示例。随便浏览一下网页,没找到我想要说的需求效果。我想着,一些组件库里说不定就有很好的示例。我到elementui组件库里查看一下,发现它的日期时间选择器就很好地展示了我想要展示的效果。

001.png

实现

创建一个index.html文件,我们的示例代码,将在这个文件里完成。

今天是2月6号,这个时间很好。因为如果天数比7大,直接当前天数减去7,就可以获取前面七天的时间了。现在是6号,前面七天,就是上个月的时间了。情况复杂了一点,我们看下怎么实现效果

先分析一下:

当前天数小于7,那就是上一个月的天数了。先是当前月份减去1,然后获取上个月的最后天数。因为每个月的天数都是不一样的,需要获取一下。获取完后,用上个月的最后天数,减去剩余天数,就可以获取到上一个月的天数了。

分析完了,我们开始写代码了

      let step = 7;
      let date = new Date();
      let currentDate = date.getDate();
      if (currentDate > step) {
        console.log(`前七天是${currentDate - setp}号`);
      } else {
        let lastMonthLastDate = new Date(2023, date.getMonth() - 1, 0);
        console.log(lastMonthLastDate.getDate());
        let lastDate = lastMonthLastDate.getDate() - (step - currentDate);
        console.log(`前七天是上个月${lastDate}号`);
      }
  • 定义一个变量step,为过去的天数

  • 通过new Date,得到Date的实例对象,获取当前时间的天数

  • 判断一下

    • 如果当前天数大于7,那么当前天数直接减去7,就可以获取前面7天的天数了
    • 如果当前天数小于7,月份减去1。然后获取上个月最后一天的天数,再减去剩余天数,就可以获取到上个月的天数了。

我们运行index.html文件到浏览器查看一下

002.png

当前时间是2月6号,前面7天,就是上个月的31号了。

小结

本小节,写了一个小示例:计算当前时间过去的前7天的时间,是哪一天。通过该示例,讲解了怎么利用new Date()来获取前面7天的时间。更多的是逻辑分析,具体的代码还需要自己思考一下怎么实现。