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的面向对象(一)
Nov 09 Javascript
JS类的封装及实现代码
Dec 02 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
Vue中jsx不完全应用指南小结
Nov 01 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获取网页上所有链接的方法
2015/04/03 PHP
php搜索文件程序分享
2015/10/30 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
php微信公众号开发模式详解
2016/11/28 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python处理excel绘制雷达图
2019/10/18 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
2014年绿化工作总结
2014/12/09 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python