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 css在IE和Firefox中区别分析
Feb 18 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
express框架下使用session的方法
Jul 31 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
angularJS开发注意事项
2018/05/26 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
高三高考决心书
2014/03/11 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
导游词之唐山景点
2019/12/18 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Python利用capstone实现反汇编
2022/04/06 Python
使用MybatisPlus打印sql语句
2022/04/22 SQL Server