Vue获取两个时间点之间的所有间隔时间

本文主要是介绍Vue获取两个时间点之间的所有间隔时间,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这里我们使用的主要方法是new Date().setFullYear()设置当前的时间,如果传入的时间是new Date().setFullYear(2020,12,32),该方法会自动将时间转化为2021-1-1的时间戳 ,如果有一个参数超出了合理的范围,setFullYear 方法会更新其他参数值,日期对象的日期值也会被相应更新。 例如,为 monthValue指定 15, 则年份会加1,月份值会为3 ** MDN说明

我们在开发中经常遇到后端人员给的日期时间格式不是标准的,需要我们前端人员来处理。
例如:
在这里插入图片描述
处理后:

console.log(new Date('2022-05-31T05:47:41Z').toLocaleString())

在这里插入图片描述

1,获取两个时间之间的 间隔时间

在这里插入图片描述
代码如下:

/** 获取两个时间之间的 间隔时间* @param { Date | number | string } startTime 开始时间 字符串格式(6:00 06:00 18:00, 18:00:00) 必须是24小时格式* @param { Date | number | string } endTime 结束时间 字符串格式(6:00 06:00 18:00, 18:00:00) 必须是24小时格式*/
export function getBetweenTime(startTime: string, endTime: string): Array<string> {// 校验时间格式if (typeof startTime === 'string' && typeof endTime === 'string') {const reg = /^(0?[1-9]|([1-2][0-4])):(([0-5][0-9])(:([0-9][0-9]))?)$/if (!reg.test(startTime)) throw `开始时间:${startTime} 时间格式错误`if (!reg.test(endTime)) throw `结束时间:${endTime} 时间格式错误`} else throw `${startTime} 或者 ${endTime} 时间格式错误`let start: number = +startTime.split(':')[0]let end: number = +endTime.split(':')[0]const resultTime: string[] = []// 当 开始时间小于结束时间的时候进入循环while (start <= end) {// 拼接时间格式 自动给 小于10的时间前面补0let setTime = start >= 10 ? `${start}:00` : `0${start}:00`resultTime.push(setTime)// 重新设置开始时间start += 1}return resultTime
}

2,获取两个日期之间的间隔日期

在这里插入图片描述

/** 获取两个日期之间的间隔日期* @param { Date | number | string } startTime 开始时间 标准时间格式 时间戳格式 字符串格式(2008-08-08,2008-8-8,2008-08-8,2008-8-08)* @param { Date | number | string } endTime 结束时间 标准时间格式 时间戳格式 字符串格式(2008-08-08,2008-8-8,2008-08-8,2008-8-08)*  */
export function getBetweenDate(startTime: Date | number | string,endTime: Date | number | string
): Array<string> {// 校验时间格式if (typeof startTime === 'string') {const reg = /^\d{4}-(0?[1-9]|1[0-2])-((0?[1-9])|((1|2)[0-9])|30|31)$/gif (!reg.test(startTime)) throw `开始时间:${startTime}时间格式错误`}if (typeof endTime === 'string') {const reg = /^\d{4}-(0?[1-9]|1[0-2])-((0?[1-9])|((1|2)[0-9])|30|31)$/gif (!reg.test(endTime)) throw `结束时间:${endTime}时间格式错误`}let start: Date = new Date(startTime)let end: Date = new Date(endTime)const resultTime: string[] = []// 当 开始时间小于结束时间的时候进入循环while (start <= end) {let getDay = start.getDate()// 月份需要加 1let getMonth = start.getMonth() + 1let getYear = start.getFullYear()/*** 拼接时间格式* (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) 自动给 小于10的时间前面补0*/let setTime =`${getYear}-` +(getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) +'-' +(getDay >= 10 ? `${getDay}` : `0${getDay}`)resultTime.push(setTime)/*** 重新设置开始时间* 使用 setFullYear() 方法会自动将时间累加,返回的是时间戳格式* 使用 new Date() 将时间重新设置为标准时间* getMonth - 1 将月份时间重新还原*/start = new Date(start.setFullYear(getYear, getMonth - 1, getDay + 1))}return resultTime
}

3,获取指定两个月份之间的 间隔月份

在这里插入图片描述

/*** 获取指定两个月份之间的 间隔月份* @param { Date | number | string } startTime 开始时间 标准时间格式 时间戳格式 字符串格式(2008-08,2008-8)* @param { Date | number | string } endTime 结束时间 标准时间格式 时间戳格式 字符串格式(2008-08,2008-8)*/
export function getBetweenMonth(startTime: Date | number | string,endTime: Date | number | string
): Array<string> {// 校验时间格式if (typeof startTime === 'string') {const reg = /^\d{4}-(0?[1-9]|1[0-2])$/gif (!reg.test(startTime)) throw `开始时间:${startTime}时间格式错误`}if (typeof endTime === 'string') {const reg = /^\d{4}-(0?[1-9]|1[0-2])$/gif (!reg.test(endTime)) throw `结束时间:${endTime}时间格式错误`}let start: Date = new Date(startTime)let end: Date = new Date(endTime)const resultTime: string[] = []// 当 开始时间小于结束时间的时候进入循环while (start <= end) {// 月份需要加 1let getMonth = start.getMonth() + 1let getYear = start.getFullYear()/*** 拼接时间格式* (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) 自动给 小于10的时间前面补0*/let setTime = `${getYear}-` + (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`)resultTime.push(setTime)/*** 重新设置开始时间* 使用 setFullYear() 方法会自动将时间累加,返回的是时间戳格式* 使用 new Date() 将时间重新设置为标准时间*/start = new Date(start.setFullYear(getYear, getMonth))}return resultTime
}

4,获取两个年份时间点 之间的间隔年份

在这里插入图片描述

/** 获取两个年份时间点 之间的间隔年份* @param { Date | number | string } startTime 开始时间 标准时间格式 时间戳格式 字符串格式(2008)* @param { Date | number | string } endTime 结束时间 标准时间格式 时间戳格式 字符串格式(2008)*/
export function getBetweenYear(startTime: Date | number | string,endTime: Date | number | string
): Array<string> {// 校验时间格式if (typeof startTime === 'string') {const reg = /^\d{4}$/gif (!reg.test(startTime)) throw `开始时间:${startTime}时间格式错误`}if (typeof endTime === 'string') {const reg = /^\d{4}$/gif (!reg.test(endTime)) throw `结束时间:${endTime}时间格式错误`}let start: Date = new Date(startTime)let end: Date = new Date(endTime)const resultTime: string[] = []// 当 开始时间小于结束时间的时候进入循环while (start <= end) {let getYear = start.getFullYear()// 拼接时间格式let setTime = `${getYear}`resultTime.push(setTime)/*** 重新设置开始时间* 使用 setFullYear() 方法会自动将时间累加,返回的是时间戳格式* 使用 new Date() 将时间重新设置为标准时间*/start = new Date(start.setFullYear(getYear + 1))}return resultTime
}

这篇关于Vue获取两个时间点之间的所有间隔时间的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/430255

相关文章

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

锐捷和腾达哪个好? 两个品牌路由器对比分析

《锐捷和腾达哪个好?两个品牌路由器对比分析》在选择路由器时,Tenda和锐捷都是备受关注的品牌,各自有独特的产品特点和市场定位,选择哪个品牌的路由器更合适,实际上取决于你的具体需求和使用场景,我们从... 在选购路由器时,锐捷和腾达都是市场上备受关注的品牌,但它们的定位和特点却有所不同。锐捷更偏向企业级和专

如何用Java结合经纬度位置计算目标点的日出日落时间详解

《如何用Java结合经纬度位置计算目标点的日出日落时间详解》这篇文章主详细讲解了如何基于目标点的经纬度计算日出日落时间,提供了在线API和Java库两种计算方法,并通过实际案例展示了其应用,需要的朋友... 目录前言一、应用示例1、天安门升旗时间2、湖南省日出日落信息二、Java日出日落计算1、在线API2

python获取当前文件和目录路径的方法详解

《python获取当前文件和目录路径的方法详解》:本文主要介绍Python中获取当前文件路径和目录的方法,包括使用__file__关键字、os.path.abspath、os.path.realp... 目录1、获取当前文件路径2、获取当前文件所在目录3、os.path.abspath和os.path.re

Java子线程无法获取Attributes的解决方法(最新推荐)

《Java子线程无法获取Attributes的解决方法(最新推荐)》在Java多线程编程中,子线程无法直接获取主线程设置的Attributes是一个常见问题,本文探讨了这一问题的原因,并提供了两种解决... 目录一、问题原因二、解决方案1. 直接传递数据2. 使用ThreadLocal(适用于线程独立数据)

如何使用 Bash 脚本中的time命令来统计命令执行时间(中英双语)

《如何使用Bash脚本中的time命令来统计命令执行时间(中英双语)》本文介绍了如何在Bash脚本中使用`time`命令来测量命令执行时间,包括`real`、`user`和`sys`三个时间指标,... 使用 Bash 脚本中的 time 命令来统计命令执行时间在日常的开发和运维过程中,性能监控和优化是不

python中的与时间相关的模块应用场景分析

《python中的与时间相关的模块应用场景分析》本文介绍了Python中与时间相关的几个重要模块:`time`、`datetime`、`calendar`、`timeit`、`pytz`和`dateu... 目录1. time 模块2. datetime 模块3. calendar 模块4. timeit

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

Java将时间戳转换为Date对象的方法小结

《Java将时间戳转换为Date对象的方法小结》在Java编程中,处理日期和时间是一个常见需求,特别是在处理网络通信或者数据库操作时,本文主要为大家整理了Java中将时间戳转换为Date对象的方法... 目录1. 理解时间戳2. Date 类的构造函数3. 转换示例4. 处理可能的异常5. 考虑时区问题6.