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 相关文章推荐
初识JQuery 实例一(first)
Mar 16 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 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中最简单的字符串匹配算法
2014/12/16 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
python 字符串split的用法分享
2013/03/23 Python
Python中super的用法实例
2015/05/28 Python
如何用Python合并lmdb文件
2018/07/02 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
python爬取音频下载的示例代码
2020/10/19 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
音乐教学案例
2014/01/30 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
加强作风建设心得体会
2014/10/22 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
听证通知书
2015/04/24 职场文书
阿里云日志过滤器配置日志服务
2022/04/09 Servers