JavaScript自动生成24小时时间区间

2024-10-20 05:30:27

1、时间跨度为60分钟

（1）时间区间为字符串

有时候可能需要用到24小时的时间区间，跨度为60分钟，比如下面这样的：

['00:00 - 01:00', '01:00 - 02:00', '02:00 - 03:00', '03:00 - 04:00', '04:00 - 05:00', '05:00 - 06:00', '06:00 - 07:00', '07:00 - 08:00', '08:00 - 09:00', '09:00 - 10:00', '10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00', '14:00 - 15:00', '15:00 - 16:00', '16:00 - 17:00', '17:00 - 18:00', '18:00 - 19:00', '19:00 - 20:00', '20:00 - 21:00', '21:00 - 22:00', '22:00 - 23:00', '23:00 - 24:00']

如果手动去写，则有点麻烦，这个时候可以使用一个简单的 JS 函数去自动生成，示例代码如下：

function generateTimes() {
    let timeArrays = new Array(24).fill("");

    timeArrays.forEach((item, index) => timeArrays[index] = (index < 10 ? '0' + index : index) + ':00' + ' - ' + ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00');

    return timeArrays;
}

当然，上面的方法，也可以简写成下面这样的，只需要一行代码即可

let timeArrays = new Array(24).fill('').map((item, index) => (index < 10 ? '0' + index : index) + ':00' + ' - ' + ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00');

（2）时间区间为数组

let timeArrays = new Array(24).fill(['', '']).map((item, index) => [(index < 10 ? '0' + index : index) + ':00', ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00']);
console.log(JSON.stringify(timeArrays));

生成的时间区间如下：

[["00:00","01:00"],["01:00","02:00"],["02:00","03:00"],["03:00","04:00"],["04:00","05:00"],["05:00","06:00"],["06:00","07:00"],["07:00","08:00"],["08:00","09:00"],["09:00","10:00"],["10:00","11:00"],["11:00","12:00"],["12:00","13:00"],["13:00","14:00"],["14:00","15:00"],["15:00","16:00"],["16:00","17:00"],["17:00","18:00"],["18:00","19:00"],["19:00","20:00"],["20:00","21:00"],["21:00","22:00"],["22:00","23:00"],["23:00","24:00"]]

（3）时间区间为对象

let timeArrays = new Array(24).fill({}).map((item, index) => {
    return {
        start: (index < 10 ? '0' + index : index) + ':00',
        end: ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00'
    }
});
console.log(JSON.stringify(timeArrays));

生成的时间区间如下：

[{"start":"00:00","end":"01:00"},{"start":"01:00","end":"02:00"},{"start":"02:00","end":"03:00"},{"start":"03:00","end":"04:00"},{"start":"04:00","end":"05:00"},{"start":"05:00","end":"06:00"},{"start":"06:00","end":"07:00"},{"start":"07:00","end":"08:00"},{"start":"08:00","end":"09:00"},{"start":"09:00","end":"10:00"},{"start":"10:00","end":"11:00"},{"start":"11:00","end":"12:00"},{"start":"12:00","end":"13:00"},{"start":"13:00","end":"14:00"},{"start":"14:00","end":"15:00"},{"start":"15:00","end":"16:00"},{"start":"16:00","end":"17:00"},{"start":"17:00","end":"18:00"},{"start":"18:00","end":"19:00"},{"start":"19:00","end":"20:00"},{"start":"20:00","end":"21:00"},{"start":"21:00","end":"22:00"},{"start":"22:00","end":"23:00"},{"start":"23:00","end":"24:00"}]

2、时间跨度为30分钟

如果时间跨度为30分钟，也就是说1天24小时，需要分成48个时间区间。

（1）时间区间为字符串

let timeArrays = new Array(48).fill('').map((item, index) => {
    let startVal = index * 30;
    let endVal = (index + 1) * 30;
    let startHour = Math.floor((startVal / 60));
    let startMinute = (startVal % 60);
    let endHour = Math.floor((endVal / 60));
    let endMinute = (endVal % 60);
    let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
    let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);

    return startTime + ' - ' + endTime;
});
console.log(timeArrays);

生成的时间区间如下：

['00:00 - 00:30', '00:30 - 01:00', '01:00 - 01:30', '01:30 - 02:00', '02:00 - 02:30', '02:30 - 03:00', '03:00 - 03:30', '03:30 - 04:00', '04:00 - 04:30', '04:30 - 05:00', '05:00 - 05:30', '05:30 - 06:00', '06:00 - 06:30', '06:30 - 07:00', '07:00 - 07:30', '07:30 - 08:00', '08:00 - 08:30', '08:30 - 09:00', '09:00 - 09:30', '09:30 - 10:00', '10:00 - 10:30', '10:30 - 11:00', '11:00 - 11:30', '11:30 - 12:00', '12:00 - 12:30', '12:30 - 13:00', '13:00 - 13:30', '13:30 - 14:00', '14:00 - 14:30', '14:30 - 15:00', '15:00 - 15:30', '15:30 - 16:00', '16:00 - 16:30', '16:30 - 17:00', '17:00 - 17:30', '17:30 - 18:00', '18:00 - 18:30', '18:30 - 19:00', '19:00 - 19:30', '19:30 - 20:00', '20:00 - 20:30', '20:30 - 21:00', '21:00 - 21:30', '21:30 - 22:00', '22:00 - 22:30', '22:30 - 23:00', '23:00 - 23:30', '23:30 - 24:00']

（2）时间区间为数组

let timeArrays = new Array(48).fill(['', '']).map((item, index) => {
    let startVal = index * 30;
    let endVal = (index + 1) * 30;
    let startHour = Math.floor((startVal / 60));
    let startMinute = (startVal % 60);
    let endHour = Math.floor((endVal / 60));
    let endMinute = (endVal % 60);
    let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
    let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);

    return [startTime, endTime];
});
console.log(JSON.stringify(timeArrays));

生成的时间区间如下：

[["00:00","00:30"],["00:30","01:00"],["01:00","01:30"],["01:30","02:00"],["02:00","02:30"],["02:30","03:00"],["03:00","03:30"],["03:30","04:00"],["04:00","04:30"],["04:30","05:00"],["05:00","05:30"],["05:30","06:00"],["06:00","06:30"],["06:30","07:00"],["07:00","07:30"],["07:30","08:00"],["08:00","08:30"],["08:30","09:00"],["09:00","09:30"],["09:30","10:00"],["10:00","10:30"],["10:30","11:00"],["11:00","11:30"],["11:30","12:00"],["12:00","12:30"],["12:30","13:00"],["13:00","13:30"],["13:30","14:00"],["14:00","14:30"],["14:30","15:00"],["15:00","15:30"],["15:30","16:00"],["16:00","16:30"],["16:30","17:00"],["17:00","17:30"],["17:30","18:00"],["18:00","18:30"],["18:30","19:00"],["19:00","19:30"],["19:30","20:00"],["20:00","20:30"],["20:30","21:00"],["21:00","21:30"],["21:30","22:00"],["22:00","22:30"],["22:30","23:00"],["23:00","23:30"],["23:30","24:00"]]

（3）时间区间为对象

let timeArrays = new Array(48).fill(['', '']).map((item, index) => {
    let startVal = index * 30;
    let endVal = (index + 1) * 30;
    let startHour = Math.floor((startVal / 60));
    let startMinute = (startVal % 60);
    let endHour = Math.floor((endVal / 60));
    let endMinute = (endVal % 60);
    let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
    let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);

    return {
        start: startTime,
        end: endTime
    };
});
console.log(JSON.stringify(timeArrays));

生成的时间区间如下：

[{"start":"00:00","end":"00:30"},{"start":"00:30","end":"01:00"},{"start":"01:00","end":"01:30"},{"start":"01:30","end":"02:00"},{"start":"02:00","end":"02:30"},{"start":"02:30","end":"03:00"},{"start":"03:00","end":"03:30"},{"start":"03:30","end":"04:00"},{"start":"04:00","end":"04:30"},{"start":"04:30","end":"05:00"},{"start":"05:00","end":"05:30"},{"start":"05:30","end":"06:00"},{"start":"06:00","end":"06:30"},{"start":"06:30","end":"07:00"},{"start":"07:00","end":"07:30"},{"start":"07:30","end":"08:00"},{"start":"08:00","end":"08:30"},{"start":"08:30","end":"09:00"},{"start":"09:00","end":"09:30"},{"start":"09:30","end":"10:00"},{"start":"10:00","end":"10:30"},{"start":"10:30","end":"11:00"},{"start":"11:00","end":"11:30"},{"start":"11:30","end":"12:00"},{"start":"12:00","end":"12:30"},{"start":"12:30","end":"13:00"},{"start":"13:00","end":"13:30"},{"start":"13:30","end":"14:00"},{"start":"14:00","end":"14:30"},{"start":"14:30","end":"15:00"},{"start":"15:00","end":"15:30"},{"start":"15:30","end":"16:00"},{"start":"16:00","end":"16:30"},{"start":"16:30","end":"17:00"},{"start":"17:00","end":"17:30"},{"start":"17:30","end":"18:00"},{"start":"18:00","end":"18:30"},{"start":"18:30","end":"19:00"},{"start":"19:00","end":"19:30"},{"start":"19:30","end":"20:00"},{"start":"20:00","end":"20:30"},{"start":"20:30","end":"21:00"},{"start":"21:00","end":"21:30"},{"start":"21:30","end":"22:00"},{"start":"22:00","end":"22:30"},{"start":"22:30","end":"23:00"},{"start":"23:00","end":"23:30"},{"start":"23:30","end":"24:00"}]

3、时间跨度任意指定

除了常见的时间跨度为60分钟或者30分钟，有的时候还可能需要其他的时间跨度，那么是否可能写一个相对通用的方法，参数为时间跨度（以分钟为单位），当然是可以的，具体实现代码如下（这里仅生成时间区间为字符串的，其他格式参考上面）：

function generateTimes(step) {
    let size = Math.floor(24 * 60 / step);
    let timeArrays = new Array(size).fill('').map((item, index) => {
        let startVal = index * step;
        let endVal = (index + 1) * step;
        let startHour = Math.floor((startVal / 60));
        let startMinute = (startVal % 60);
        let endHour = Math.floor((endVal / 60));
        let endMinute = (endVal % 60);
        let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
        let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);

        return startTime + ' - ' + endTime;
    });

    return timeArrays;
}

比如想要生成时间跨度为120分钟的时间区间，可以直接传入120即可

console.log(generateTimes(120));

生成的时间区间如下：

['00:00 - 02:00', '02:00 - 04:00', '04:00 - 06:00', '06:00 - 08:00', '08:00 - 10:00', '10:00 - 12:00', '12:00 - 14:00', '14:00 - 16:00', '16:00 - 18:00', '18:00 - 20:00', '20:00 - 22:00', '22:00 - 24:00']

需要注意的是，如果时间跨度无法被整除，那么生成的时间区间可能无法完全覆盖24小时。

到此这篇关于JavaScript自动生成24小时时间区间的文章就介绍到这了,更多相关JS时间区间内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS实现获取时间已经时间与时间戳转换

目录获取当前月的第一天获前取n天日期根据两个日期,判断相差天数根据bai两个日期,判断相差月数获取几个月前的输入日期时间戳转换时间时间戳转换时间-无时分秒时间戳转换时间-无日期获取当前日期时间戳转换时间或获取日期工具类获取当前月的第一天 function getCurrentMonthFirst=()=>{ var date=new Date(); date.setDate(1); return common.getdateNoTime(date); } 获前取n天日期 f
js正则格式化日期时间自动补0的两种解法

目录背景解法一思路: 代码: 解法二思路: 总结参考背景时间日期格式化的需求很常见,也有很多工具类转换方法,比如需要将2022-3-4这种日期格式转化为2022-03-04,也就是实现个位数月份或天数日期自动前置补 0.用moment.js.dayjs第三方库的 API 也很容易做到,这里我们自己实现一下看看. 解法一思路: 先来看看常规方案.就用这个2022-3-4日期来举例子,我们先根据-切分字符串,得到一个数组,然后分别识别3.4这种个位数日期,<10就前置补 0,否则不操
js获取最近一周一个月三个月时间的简单示例

目录获取近一周时间获取近一个月时间获取近三个月时间 New Date()与setDate()参数总结获取近一周时间 var end = new Date(); var year = end.getFullYear(); var month = end.getMonth() + 1;//0-11表示1-12月 var day = end.getDate(); var dateObj = {}; dateObj.end = year + '-' + month + '-' + day; i
JS格式化时间的几种方法总结

方法一方法 //格式化时间 function format(dat){ //获取年月日,时间 var year = dat.getFullYear(); var mon = (dat.getMonth()+1) < 10 ? "0"+(dat.getMonth()+1) : dat.getMonth()+1; var data = dat.getDate() < 10 ? "0"+(dat.getDate()) : dat.getDate(); var
springboot 返回json格式数据时间格式配置方式

目录返回json格式数据时间格式配置返回JSON日期格式问题返回json格式数据时间格式配置数据库里面查出来的时间是时间错格式,前段需要处理才能展示相应的格式,自己一个个转的话太麻烦,所以可以在apllication.property加入下面配置就可以 #时间戳统一转换 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss spring.jackson.time-zone=GMT+8 其中time-zone是时区偏移设置,如果不指定的话时间和北京时
Vue.js实现时间轴功能

本文实例为大家分享了Vue.js实现时间轴功能的具体代码,供大家参考,具体内容如下 GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key
JavaScript自动生成24小时时间区间

目录 1.时间跨度为60分钟 (1)时间区间为字符串 (2)时间区间为数组 (3)时间区间为对象 2.时间跨度为30分钟 (1)时间区间为字符串 (2)时间区间为数组 (3)时间区间为对象 3.时间跨度任意指定 1.时间跨度为60分钟 (1)时间区间为字符串有时候可能需要用到24小时的时间区间,跨度为60分钟,比如下面这样的: ['00:00 - 01:00', '01:00 - 02:00', '02:00 - 03:00', '03:00 - 04:00', '04:00 - 05:00'
javascript自动生成包含数字与字符的随机字符串

本文实例讲述了javascript自动生成包含数字与字符的随机字符串的方法.分享给大家供大家参考.具体如下: 这里主要用到Math.random() 和 Math.floor() 两个函数 Math.random() -- 返回0和1之间的伪随机数可能为0,但总是小于1,[0,1) Math.floor() -- 向下取整,舍掉小数字后的值实现随机多位数的方法: 复制代码代码如下: /** * * 随机生成数字 * *@param num 生成数字位数 */ functi
JavaScript自动生成年月范围选择功能完整示例【基于jQuery插件】

本文实例讲述了JavaScript实现的自动生成年月范围选择功能.分享给大家供大家参考,具体如下: 近日做项目涉及到日期选择,为了用户界面友好,于是加入了一年内的年月段的查询功能,先看效果会自动判断当前年份以下为html代码其中用到了 Jquery 和 struts 标签但是这两个都不是重要的主要书用于赋值和取值方便还用到了 WdatePicker 插件进行具体日期选择 <%@ page language="java" import="java.u
用javascript自动显示最后更新时间

经常更新网页,总是懒得弄最后更新时间. 下面用javascript实现显示最后更新时间. <script language="JavaScript">  </script> 呵呵,就这么简单.
pycharm如何设置自动生成作者信息

目录设置自动生成作者信息其他变量设置模板,自动生成作者.时间.版本等基本信息效果预览实现过程设置自动生成作者信息 1.file->settings->Editor->file and code templates->python script 其他变量 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : ${DATE} ${TIME} # @Author : 靓仔 # @Site : ${SITE} # @Fi
JavaScript实现自动生成网页元素功能（按钮、文本等）

创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>
基于JavaScript代码实现自动生成表格

废话不多说,直接给大家贴js代码了,具体代码如下所示: //js实现输入表格行数.列数自动生成表格源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
mybatis-plus自动填充插入更新时间有8小时时差

今天使用mybatis-plus自动填充插入和更新时间有8小时时差后来发现只需要修改一下mybaits连接的url即可原先我是用的 datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/gulischool?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC username: root passw
自动生成文章摘要的代码[JavaScript 版本]

很多程序绕过这个问题,往往人工来决定在何处截断,太麻烦了. 实现内容:截断一段含有HTML代码的文本,但是不会出现围堵标记没有封闭的问题. 一个PHP版本的在这里!: 自动生成文章摘要[PHP版本]. 核心部分如下: 复制代码代码如下: function Generate_Brief(text,length){ if(text.length < length) return text; var Foremost = text.substr(0,length); var re
自动生成文章摘要[JavaScript 版本]

By dknt From bbs.blueidea.com 搜了搜这个,发现找不到答案.所以自己写了一个,很多程序绕过这个问题,往往人工来决定在何处截断,太麻烦了. 实现内容:截断一段含有HTML代码的文本,但是不会出现围堵标记没有封闭的问题. 一个PHP版本的在这里!:自动生成文章摘要[PHP版本]. 核心部分如下: 复制代码代码如下: function Generate_Brief(text,length){ if(text.length < length) return text

JavaScript自动生成24小时时间区间

目录

1、时间跨度为60分钟

（1）时间区间为字符串

（2）时间区间为数组

（3）时间区间为对象

2、时间跨度为30分钟

（1）时间区间为字符串

（2）时间区间为数组

（3）时间区间为对象

3、时间跨度任意指定

相关推荐

随机推荐