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


Posted in Javascript onMarch 19, 2018

 遇到一个场景,需要拿到指定时间范围内的每一天,满足格式"YYYYMMDD",简单的功能,简单的思路

准备

 date对象有很多的方法,用到了以下:

   new date ()生成date对象,可以直接指定年月日等,new date(year,month,day)

   getFullYear() 返回date对象中的年份

   getMonth() 返回date对象中的月份(0~11),注意从0开始计

   getDate() 返回date对象中的天,注意从 1 开始计

      getTime() 返回1970年1月1日到date对象的毫秒数

解析指定范围

 规定按照 yyyy-mm-dd格式字符串输入时间范围,split分割即可得到开始和结束时间的年月日,再生成对应的date对象,拿到毫秒数

let st = start.split('-');
 let et = end.split('-');
 let startTime = new Date(st[0],st[1]-1,st[2]).getTime();
 let endTime = new Date(et[0],et[1]-1,et[2]).getTime();

  注意 : 月份需要减 1 ,因为是从0开始计的

拿到每一天

  如何知道时间范围内有那些天呢?上面有了开始和结束时间距离1970.1.1的毫秒数,每一天有24 * 60 * 60 * 1000的毫秒数,所以我们可以通过毫秒数计算出每一天

for( let i = startTime ; i <= endTime ; ){
    res.push(formatTime(i,''));
    i += 24 * 60 * 60 * 1000;
  }

格式化输出

将时间格式化,个位数字补0,加上指定的分割符

function formatTime(time,spliter = '-'){
  let date = new Date(time);
  let year = date.getFullYear();
  let month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
  let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
  return `${year}${spliter}${month}${spliter}${day}
}

验证

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

总结

以上所述是小编给大家介绍的JavaScript生成指定范围的时间列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript控制图片播放的实现代码
Jul 29 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
vue-router源码之history类的浅析
May 21 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 #Javascript
angularjs 缓存的使用详解
Mar 19 #Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 #Javascript
react-native-video实现视频全屏播放的方法
Mar 19 #Javascript
vue实现树形菜单效果
Mar 19 #Javascript
VUE重点问题总结
Mar 19 #Javascript
p5.js入门教程之键盘交互
Mar 19 #Javascript
You might like
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
python实现k-means聚类算法
2018/02/23 Python
Django中使用Celery的方法示例
2018/11/29 Python
python实现多层感知器
2019/01/18 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
工作自我评价分享
2013/12/01 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
详解Python常用的魔法方法
2021/06/03 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis