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的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
JavaScript验证知识整理
Mar 24 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
Javascript实现单选框效果
Dec 09 Javascript
JS中一些高效的魔法运算符总结
May 06 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 柱状图实现代码
2009/12/04 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
php生成短网址示例
2014/05/05 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
JS hashMap实例详解
2016/05/26 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
大学生职业生涯规划书
2014/03/14 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
领导欢迎词致辞
2015/01/23 职场文书
JavaScript原型链详解
2021/11/07 Javascript