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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
js中this的用法实例分析
Jan 10 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
javascript拖拽应用实例
Mar 25 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
webpack4 css打包压缩问题的解决
May 18 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
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
js中有关IE版本检测
2012/01/04 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python自省及反射原理实例详解
2020/07/06 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
集团薪酬管理制度
2014/01/13 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2015年女职工工作总结
2015/05/15 职场文书
纪委立案决定书
2015/06/24 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL