JavaScript输出所选择起始与结束日期的方法


Posted in Javascript onJuly 12, 2017

本文实例讲述了JavaScript输出所选择起始与结束日期的方法。分享给大家供大家参考,具体如下:

一直在用公司的报表工具做报表,报表里最常用的查询条件就是开始日期、结束日期。

自己会一点html和js,于是就想用html+JavaScript来实现选择查询日期,以及做出相应。

实现之后,觉得这个还是比较简单的,N年前学的html和javascript,总算是派上用场了,人人都可以开发网页。

这个代码要在谷歌的chrome浏览器中,日期选择才能有效果(代码中的input元素Type属性值date为HTML5元素,需要支持HTML5的浏览器运行)

代码如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" content="charset=gbk"></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(xx[i].value == null || xx[i].value == 'Undefined' || xx[i].value == "")
      // alert(xx[i].value);
     }
    }
    if( i % 2 == 1)
     s+=";";
   }
   var yy = document.getElementById("sp");
   yy.innerHTML = s;
   //document.write("abcdefg<hr>");
   //alert(xx.length);
  }
 </script>
</head>
<body>
 <table>
  <tr>
   <td name="day">开始日期: <input type="date" name="day" /></td>
   <td name="day">结束日期:<input type="date" name="day" /></td>
   <td><input type="button" value="查 询" onclick="query()" />
   </td>
  </tr>
  <tr>
   <td><span id="sp"></span></td>
  </tr>
 </table>
</body>
</html>

写完这个代码后,第一个感觉是javascript是一个区分大小写的编程语言,在我印象中好像就VB、SQL是不区分大小写的,而其他的c#、java、python都是区分大小写的,今天在写js代码时,很大一个坑就是定义的变量是小写s,但是写出大写的S了,过了5分钟才发现总是报错:变量没有定义。。。

运行效果如下:

JavaScript输出所选择起始与结束日期的方法

通过这个例子,我感觉自己对js 、html更加了解:

1、日期选择的输入,这里通过input标签的 type=date来实现。
2、当选择日期之后,点击按钮,这个按钮上的文字,是通过 input type=button的value属性来实现。
3、点击按钮之后,怎么响应?写上onclick数学=“处理函数” 就可以
4、这个onclick事件的响应函数要怎么写?这里点击之后,会输出选择的日期。
5、如何获取到选择的日期呢?这里通过document对象的 getElementsByName函数来找标签属性name="day"的标签。
6、找到这些标签之后,接下来判断上又遇到了麻烦。对于标签内容可以用 .innerText(只是文本而不包含其他标签),而对于网页的内容则是.innerHTML。另外,对于选择的日期值,可以用.value属性 来取。
7、接下来的一个问题是,既要取标签内容,又要取所选择的日期值,如何区分呢?
可以用.tagName属性来判断,如果是INPUT,那么用.value取值,如果是TD,那么用.innerText。
8、假设没有选择日期,那么获取到的value是什么呢?实验证明返回了空串,而不是null。如果变量s初始化,那么s的值就是Undefined。
9、字符串的赋值可以用+=运算符,那么代码s=s+xx ,可以改成s+=xx,这种写法普遍的写法,现在连sql语句也是支持的
10、对于代码中的if else语句,着实觉得写着不方便,尽然没有elseif或者elif,而是一定要else,然后再写if -else。。。
11、i%2 == 1这个是因为i是0、1、2、3,当到了i=1时,才在变量s中加上分号,效果:
开始日期: 2017-01-03;结束日期:2017-01-19;
12、输出结果放哪里?这里在报表中增加了1行:span标签,name=sp,一开始不会显示出来。当然,要把输出作为这个标签的内容,首先要找到标签,这里通过getElementById来找到标签,然后把输出结果放到.innerHTML中就可以了。

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 格式字符串的应用
Mar 29 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
JS实现购物车基本功能
Nov 08 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
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 #Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 #Javascript
You might like
9段PHP实用功能的代码推荐
2014/10/14 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
了解一下python内建模块collections
2020/09/07 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
防灾减灾宣传标语
2014/10/07 职场文书
2014年招商工作总结
2014/11/22 职场文书
单位实习鉴定评语
2015/01/04 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
停电放假通知
2015/04/14 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
清明节主题班会
2015/08/14 职场文书
Python实现简繁体转换
2021/06/07 Python
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
全新239军机修复记
2022/04/05 无线电
Python实现仓库管理系统
2022/05/30 Python