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利用apply和arguments复用方法
Nov 25 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
AngularJS Module方法详解
Dec 08 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
js变量提升深入理解
Sep 16 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
使用js和canvas实现时钟效果
Sep 08 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python程序控制NAO机器人行走
2019/04/29 Python
详解python中的线程与线程池
2019/05/10 Python
浅析python内置模块collections
2019/11/15 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
七年级政治教学反思
2014/02/03 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2014年公务员工作总结
2014/11/18 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
一篇文章学会Vue中间件管道
2021/06/20 Vue.js