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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 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中的use关键字概述
2014/07/23 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
layui实现三级联动效果
2019/07/26 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python中subprocess模块用法实例详解
2015/05/20 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
itchat接口使用示例
2017/10/23 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
使用python绘制二维图形示例
2019/11/22 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
高一新生军训感言
2014/03/02 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏