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插件 cluetip 关键词注释
Jan 12 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
详解vue中组件参数
Jul 09 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
JavaScript随机数的组合问题案例分析
May 16 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
一个MYSQL操作类
2006/11/16 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
json跟xml的对比分析
2008/06/10 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python+PIL实现支付宝AR红包
2018/02/09 Python
Django 内置权限扩展案例详解
2019/03/04 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python科学计算之narray对象用法
2019/11/25 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
pycharm导入源码的具体步骤
2020/08/04 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
寒假思想汇报
2014/01/10 职场文书
员工安全承诺书
2014/05/22 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
地球一小时宣传标语
2014/06/24 职场文书
2014年人事科工作总结
2014/11/19 职场文书
《角的度量》教学反思
2016/02/18 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python