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 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python Requests 基础入门
2016/04/07 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
新东网科技Java笔试题
2012/07/13 面试题
培训主管岗位职责
2014/02/01 职场文书
大学四年个人自我小结
2014/03/05 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
调查研究项目计划书
2014/04/29 职场文书
机械专业技术员求职信
2014/06/14 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
优秀英文求职信范文
2015/03/19 职场文书
设备技术员岗位职责
2015/04/11 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
社区党务工作总结2015
2015/05/19 职场文书
60句有关成长的名言
2019/09/04 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android