我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

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

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时间区间内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

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

2024-04-02

使用MySQL生成最近24小时整点时间临时表

本指南详细介绍了使用MySQL生成最近24小时整点时间临时表的方法，步骤包括创建临时表、生成过去24小时的时间戳以及优化性能。该临时表可用于按小时聚合和比较数据，并通过示例演示了如何使用它。针对此方法的注意事项包括确保表中存在相应时间戳列、根据需要调整时间戳数量以及可使用GROUPBYHOUR(timestamp)进行按小时分组。
使用MySQL生成最近24小时整点时间临时表
2024-04-02

使用MySQL生成最近24小时整点时间临时表

目录生成最近24小时整点生成最近30天生成最近12个月总结 生成最近24小时整点SELECT-- 每向下推1行, @i比上次减去1b.*, i.*,DATE_FORMAT( DATE_SUB( NOW(), INTERVAL ( -( @
使用MySQL生成最近24小时整点时间临时表
2024-01-29

php如何获取时间戳转换成24小时制

本篇内容主要讲解“php如何获取时间戳转换成24小时制”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“php如何获取时间戳转换成24小时制”吧!在php中可以通过date函数将时间戳转换成24小时
2023-06-20

mysql怎么修改字段自动生成时间

2024-04-02

ubuntu中修改grub的启动时间生成

网上查询修改grub的启动时间基本上是修改 /etc/default/grub#注释掉GRUB_HIDDEN_TIMEOUT=0 #GRUB_HIDDEN_TIMEOUT=0 #修改GRUB_TIMEOUT = 0 GRUB_TIMEOU
2022-06-04

JavaScript如何生成指定范围的时间列表

2024-04-02

mybatis-plus自动填充插入更新时间有8小时时差

2024-04-02

mysql自动更新时间不生效怎么解决

mysql自动更新时间不生效怎么解决
2024-04-02

Oracle range时间范围自动分区的创建方式

这篇文章主要介绍了Oracle  range时间范围自动分区的创建方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-16

Oracle使用range分区并根据时间列自动创建分区

oracle使用range分区，根据时间列自动创建分区-- Create tablecreate table MY_TEST (id NUMBER (12) not null,name VARCHAR2 (12) not
2023-04-19

mysql自动填充时间的两种实现方式小结

目录mysql自动填充时间的两种方式方法一：android数据库级别方式二：代码级别mysql自动填充时间的两种方式mysql建表的时候有两个列，一个是createtime、另一个是updatetimejavascript当插入一条数据
2022-11-30

使用原生小程序组件Picker自定义日期时间选择器

2023-09-14

2022下半年系统集成项目管理工程师易混淆知识点14：自由浮动时间、总浮动时间

　　为帮助考生备考2022下半年软考系统集成项目管理工程师考试，编程学习网小编为大家整理了2022下半年系统集成项目管理工程师易混淆知识点，以下为2022下半年系统集成项目管理工程师易混淆知识点14：自由浮动时间、总浮动时间。　　很多考生在备考2022下半年软考系统集成项目管理工程师考试，以下为2022下半年系统集成项目管
2022下半年系统集成项目管理工程师易混淆知识点14：自由浮动时间、总浮动时间
2024-04-19

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈