JavaScript实现设置默认日期范围为最近40天的方法分析


Posted in Javascript onJuly 12, 2017

 本文实例讲述了JavaScript实现设置默认日期范围为最近40天的方法。分享给大家供大家参考,具体如下:

前面文章《JavaScript输出所选择起始与结束日期的方法》中的例子实现了选择日期,然后把选择的日期输出,这么一个功能。

不过实际项目中,测试人员说客户的需求是点击进入页面后,自动查询最近40天的数据。

想了想,实现的原理就是在页面加载之后,调用一个JavaScript函数设置日期,相比上一篇文章,除了修改了部分格式,还增加了onload函数。

另外,虽然把日期转为字符串可以用标准函数toLocaleString 来转换,不过日期格式不符合要求,所以增加了一个日期转换函数dateToString。

同样,该代码只能在chrome等支持HTML5的浏览器运行

代码如下:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="charset=utf8"></meta>
  <script type="text/javascript">
    function query()
    {
      var xx = document.getElementsByName("day");
      var s="";
      for (var i=0;i<xx.length ;i++ )
      {
        if(xx[i].tagName == 'TD')
          s= s + xx[i].innerText;
          //alert(xx[i].innerText);
        else
        {
          if(xx[i].tagName == 'INPUT')
            s += xx[i].value;
        }
        if( i % 2 == 1)
          s+=";";
      }
      var yy = document.getElementById("sp");
      yy.innerHTML = s;
    }
    //实现把日期类型数据转化为标准的字符串格式
    function dateToString(d)
    {
      var y= d.getFullYear();
      var m= d.getMonth() + 1;
      var d=d.getDate();
      //把日期2017-1-6 格式化为标准的 2017-01-06
      //判断数字的长度是否是1,如果是1那么前面加上字符0
      if(m.toString().length == 1) m= "0" + m;
      if(d.toString().length == 1) d= "0" + d;
      return y+"-"+m+"-"+d;
    }
    //在页面加载的时候,初始化开始(40天前的日期)、结束日期(当天),实现默认查询最近40天的数据
    function onload()
    {
      //获取今天的日期,但是这个数据的格式不标准
      //也就是把 Fri Jan 06 2017 10:43:07 GMT+0800 转化成 2017-01-06 这种格式
      var d = new Date();
      var endDate = dateToString(d);
      //返回日期的原始值,也就是自xxx年xx月xx日 到今天的日期相差的毫秒数
      d = d.valueOf();
      d = d - 40*24*60*60*1000;
      d = new Date(d);
      var startDate = dateToString(d);
      //把日期值输出到chrome的日志中,方便调试
      console.log(d);
      console.log(startDate);
      console.log(endDate);
      var date1 = document.getElementById("date1");
      var date2 = document.getElementById("date2");
      date1.value = startDate;
      date2.value = endDate;
    }
  </script>
</head>
<body onload="onload()">
  <table>
    <tr>
      <td name="day">开始日期: <input type="date" name="day" id="date1" /></td>
    </tr>
    <tr>
      <td name="day">结束日期:<input type="date" name="day" id="date2"/></td>
      <td><input type="button" value="查 询" onclick="query()" /></td>
    </tr>
  </table>
  <hr>
  <p><span id="sp"></span><p>
</body>
</html>

效果:

JavaScript实现设置默认日期范围为最近40天的方法分析

左侧部分是网页内容,页面一加载,就会自动设置开始日期、结束日期,点击查询按钮,在一条横线下面就会输出选择的日期值。

为了调试方便,在打开网页后,在chrome中按 F12键,然后会出现上图中右侧的部分,点击里面的Console按钮,会显示代码运行过程中的日志,其中包含了 输出的变量值。

PS:这里再为大家推荐几款比较实用的天数计算在线工具供大家使用:

在线日期/天数计算器:
http://tools.3water.com/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器:
http://tools.3water.com/jisuanqi/datecalc

在线日期天数差计算器:
http://tools.3water.com/jisuanqi/onlinedatejsq

在线天数计算器:
http://tools.3water.com/jisuanqi/datejsq

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
Bootstrap提示框效果的实例代码
Jul 12 #Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 #Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 #Javascript
微信小程序 共用变量值的实现
Jul 12 #Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 #Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 #Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 #Javascript
You might like
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
重新认识php array_merge函数
2014/08/31 PHP
php自定义分页类完整实例
2015/12/25 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
自动更新作用
2006/10/08 Javascript
Javascript实现的分页函数
2006/12/22 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
require.js的用法详解
2015/10/20 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
python中time tzset()函数实例用法
2021/02/18 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
乡镇消防工作实施方案
2014/03/27 职场文书
单位在职证明书
2014/09/11 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
Python实现简单得递归下降Parser
2022/05/02 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript
Java Spring读取和存储详细操作
2022/08/05 Java/Android
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL