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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
基于node.js之调试器详解
Aug 22 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 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 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
js原型链原理看图说明
2012/07/07 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
浅析vue-router原理
2018/10/19 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
python将unicode转为str的方法
2017/06/21 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
工业设计专业推荐信
2013/10/29 职场文书
企业演讲稿范文
2013/12/28 职场文书
北体毕业生求职信
2014/02/28 职场文书
优秀护士先进事迹
2014/05/08 职场文书
庆祝国庆节标语
2014/10/09 职场文书
世界遗产的导游词
2015/02/13 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python