提升系列：6.获取格式化时间区间-1-2

Alin
87 阅读4分钟

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

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

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

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

前言

在我的上一篇文章里面，介绍了Date类的setDate方法相关定义以及传递参数的作用。

本章将要使用到Date类的setDate方法，来实现显示一个区间范围的时间的功能。

提升系列

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

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

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

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

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

问题

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

001.png

实现

创建文件

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

定义dom结构
<div>
            <span class="before"></span>
            <span>-</span>
            <span class="now"></span>
</div>

在body里面，我们定义了一些dom结构，用来展示时间区间。

是一个div里面，分别有几个span元素。

类名为before的span元素，展示前7天时间。类名为now的span元素，展示当前天数。

js逻辑

在提升系列第一章里面，我曾经写了一个格式化时间的方法，在这里我们刚好可以使用到这个方法了。那让我们先把这个时间格式化方法拿过来。

function formatTime(time = "") {
    let date = new Date(time)
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
​
    let hour = date.getHours()
    let minute = date.getMinutes()
    let seconds = date.getSeconds()
​
    return `${year}年${month}月${day}日`
}
​

接着，处理当前时间和以前时间的问题

let date = new Date()
            let nowTime = formatTime(date)
            let day = date.getDate()
            let beforeTime = 0
            let beforeDate
            beforeDate = date.setDate(day - 7)
            beforeTime = formatTime(beforeDate)

这里，主要是创建一个Date的实例对象，获取当前时间。然后调用上面封装好的formatTime方法，把当前时间进行格式化显示。

接着，拿到当前天数。当前天数减去7天：

  • 如果结果大于0，说明是本月的日期，调用formatTime方法，格式化时间格式。
  • 如果结果小于0，说明是上一个月的日期，在setDate方法里传入一个负数，可以拿到上一个的时间。调用formatTime方法，格式化时间格式
let beforeDom = document.querySelector(".before")
            let nowDom = document.querySelector(".now")
            beforeDom.innerHTML = beforeTime
            nowDom.innerHTML = nowTime

当前时间和前7天的时间都获取到了，接下来，让它们显示到对应的dom元素里即可。

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

002.png

在浏览器的页面里，我们就可以看到页面显示的是一个时间区间了。

小结

本篇文章进行一些总结：

本小节主要是介绍了怎么获取一个时间区间天数。我们就可以巧妙地利用Date类里的setDate方法，来获取前几天的时间。

我以前其实也没怎么注意到Date类的setDate方法，用的相对来说还是比较少。也是为了实现获取时间区间天数的功能效果，才去查找一下资料，了解到这个api的。

MDN上面已经有对setDate api有详细的解释说明，如果你还没有理解的话，可以先到MDN上面查看一下这个api。详细看一下它的介绍和示例。

avatar
文章
阅读
粉丝