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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
移动端js触摸事件详解
Sep 18 Javascript
js date 格式化
Feb 15 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
js图片轮播插件的封装
Jul 21 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
vue离开当前页面触发的函数代码
Sep 01 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/03/02 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
深入浅出学习python装饰器
2017/09/29 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python截图并保存的具体实例
2021/01/14 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
财务出纳岗位职责
2014/02/03 职场文书
争先创优心得体会
2014/09/12 职场文书
高三复习计划
2015/01/19 职场文书
计算机专业自荐信
2015/03/05 职场文书
企业法律事务工作总结
2015/08/11 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
2022微信温控新功能上线
2022/05/09 数码科技