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 相关文章推荐
js获取当前页面路径示例讲解
Jan 08 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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木马攻击防御之道
2008/03/24 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
layui radio性别单选框赋值方法
2018/08/15 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python解释执行原理分析
2014/08/22 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
给Python入门者的一些编程建议
2015/06/15 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python3排序的实例方法
2020/10/20 Python
Python 实现集合Set的示例
2020/12/21 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
什么是GWT的Module
2013/01/20 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
三好学生自我鉴定
2013/12/17 职场文书
出售房屋委托书范本
2014/09/24 职场文书
结婚典礼主持词
2015/06/29 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle