标签分类
技术文章
当前位置:主页 > 计算机编程 > javascript > JS输出所选择起始与结束日期的方法

JavaScript输出所选择起始与结束日期的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:111

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

这篇文章主要知识点是关于JavaScript,输出,选择,起始,结束,日期,JS输出所选择起始与结束日期的方法,的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

精通JavaScript
精通JavaScript高清第2版
  • 类型:JavaScript大小:33.5 MB格式:PDF出版:人民邮电出版社作者:陈贤安
立即下载

本文实例讲述了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:这里再为大家推荐几款比较实用的天数计算在线工具供大家使用:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到解决axios.interceptors.respon、 儿童python编程入门书籍推、 vue项目中使用md5加密以及、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:js canvas如何实现图片放大镜功能

下一篇:JS利用scroll监听resize详解

展开 +

收起 -

学习笔记
网友NO.544699

JS简单获取当前日期和农历日期的方法

本文实例讲述了JS简单获取当前日期和农历日期的方法。分享给大家供大家参考,具体如下: navCal.js文件如下: today=new Date();function initArray(){ this.length=initArray.arguments.length for(var i=0;ithis.length;i++) this[i+1]=initArray.arguments[i] } var d=new initArray( "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");document.write(today.getFullYear(),"年",today.getMonth()+1,"月",today.getDate(),"日 ",d[today.getDay()+1]," ");calendar = new Date();month = calendar.getMonth();date = calendar.getDate();if ((month == 0) (date == 1)) document.write("元旦");if ((month == 2) (date == 12)) document.write("植树节");if ((month == 3) (date == 5)) document.write("清明节");if ((month == 4) (date == 1)) document.write("国际劳动节");if ((month == 4) (date == 4)) document.write("青年节");if ((month == 5) (date == 1)) document.write("国际儿童节");if ((month == 7) (date == 1)) document.write("建军节");if ((month == 7) (date == 16)) document.write("七夕情人节");if ((month == 9) (date == 1)) document.write("国庆节/国际音乐节/国际老人节");if ((month == 11) (date == 24)) document.write("平安夜");if ((month == 11) (date == 25)) document.write("圣诞节");/*农历部分*/var CalendarData=new Array(100);var madd=new Array(12);var tgString="甲乙丙丁戊己庚辛壬癸";var dzString="子丑寅卯辰巳午未申酉戌亥";var numString="一二三四五六七八九十";……

网友NO.754565

JS实现简单获取最近7天和最近3天日期的方法

本文实例讲述了JS实现简单获取最近7天和最近3天日期的方法。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtmlheadmeta charset="utf-8" /titlewww.jb51.net JS获取最近三天和最近3天日期/title/headbodyscript//获取最近7天日期console.log(getDay(0));//当天日期console.log(getDay(-7));//7天前日期//获取最近3天日期console.log(getDay(0));//当天日期console.log(getDay(-3));//3天前日期function getDay(day){ var today = new Date(); var targetday_milliseconds=today.getTime() + 1000*60*60*24*day; today.setTime(targetday_milliseconds); //注意,这行是关键代码 var tYear = today.getFullYear(); var tMonth = today.getMonth(); var tDate = today.getDate(); tMonth = doHandleMonth(tMonth + 1); tDate = doHandleMonth(tDate); return tYear+"-"+tMonth+"-"+tDate;}function doHandleMonth(month){ var m = month; if(month.toString().length == 1){ m = "0" + month; } return m;}/script/body/html 运行结果: PS:这里再为大家推荐几款比较实用的天数计算在线工具供大家使用: 在线日期/天数计算器: http://tools.jb51.net/jisuanqi/date_jisuanqi 在线日期计算器/相差天数计算器: http://tools.jb51.net/jisuanqi/datecalc 在线日期天数差计算器: http://tools.jb51.net/jisuanqi/onlinedatejsq 在线天数计算器: http://tools.jb51.net/jisuanqi/datejsq 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《……

网友NO.490014

js指定日期增加指定月份的实现方法

前言 本文主要给大家介绍的是关于js实现指定日期增加指定月份的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 首先,大致思路为: 1. 先将字符串格式的时间类型转化为Date类型 2. 再将Date类型的时间增加指定月份 3. 最后将Date类型的时间在转化为字符串类型 示例代码: 1. 先将字符串格式的时间类型转化为Date类型 var str = '2018-01-01 00:00:00'; //字符串格式的时间类型 var str1 = str.replace(/-/g,'/'); //'2018/01/01 00:00:00' var date = new Date(Date.parse(str1)); //date格式的时间类型 2. 再将Date类型的时间增加指定月份 var nowDate = date.addMonth(3); //date格式的时间类型Date.prototype.addMonth = function (addMonth) { var y = this.getFullYear(); var m = this.getMonth(); var nextY = y; var nextM = m; //如果当前月+要加上的月11 这里之所以用11是因为 js的月份从0开始 if ((m + addMonth) 11) { nextY = y + 1; nextM = parseInt(m + addMonth) - 12; } else { nextM = this.getMonth() + addMonth } var daysInNextMonth = Date.daysInMonth(nextY, nextM); var day = this.getDate(); if (day daysInNextMonth) { day = daysInNextMonth; } return new Date(nextY, nextM, day); }; Date.daysInMonth = function (year, month) { if (month == 1) { if (year % 4 == 0 year % 100 != 0) return 29; else return 28; } else if ((month = 6 month % 2 == 0) || (month = 6 month % 2 == 1)) return 31; else return 30; }; 3. 最……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明