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 简单抽屉效果的实现代码
Mar 09 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
vue实现app页面切换动画效果实例
2017/05/23 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
jquery实现上传文件进度条
2020/03/26 jQuery
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
python插入排序算法的实现代码
2013/11/21 Python
python基础教程之lambda表达式使用方法
2014/02/12 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
上海天奕面试题笔试题
2015/04/19 面试题
就业自荐书
2013/12/05 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
golang生成并解析JSON
2022/04/14 Golang