JavaScript輸出所選擇起始與結(jié)束日期的方法

更新時間：2017年07月12日 09:49:20 作者：不想長大啊

這篇文章主要介紹了JavaScript輸出所選擇起始與結(jié)束日期的方法,涉及javascript結(jié)合HTML5元素操作日期運算的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JavaScript輸出所選擇起始與結(jié)束日期的方法。分享給大家供大家參考，具體如下：

一直在用公司的報表工具做報表，報表里最常用的查詢條件就是開始日期、結(jié)束日期。

自己會一點html和js，于是就想用html+JavaScript來實現(xiàn)選擇查詢?nèi)掌?，以及做出相?yīng)。

實現(xiàn)之后，覺得這個還是比較簡單的，N年前學(xué)的html和javascript，總算是派上用場了，人人都可以開發(fā)網(wǎng)頁。

這個代碼要在谷歌的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;
      //由于沒有選擇日期，默認(rèn)值是空串
      //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">結(jié)束日期：<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是一個區(qū)分大小寫的編程語言，在我印象中好像就VB、SQL是不區(qū)分大小寫的，而其他的c#、java、python都是區(qū)分大小寫的，今天在寫js代碼時，很大一個坑就是定義的變量是小寫s，但是寫出大寫的S了，過了5分鐘才發(fā)現(xiàn)總是報錯：變量沒有定義。。。

運行效果如下：

通過這個例子，我感覺自己對js 、html更加了解：

1、日期選擇的輸入，這里通過input標(biāo)簽的 type=date來實現(xiàn)。
2、當(dāng)選擇日期之后，點擊按鈕，這個按鈕上的文字，是通過 input type=button的value屬性來實現(xiàn)。
3、點擊按鈕之后，怎么響應(yīng)？寫上onclick數(shù)學(xué)=“處理函數(shù)” 就可以
4、這個onclick事件的響應(yīng)函數(shù)要怎么寫？這里點擊之后，會輸出選擇的日期。
5、如何獲取到選擇的日期呢？這里通過document對象的 getElementsByName函數(shù)來找標(biāo)簽屬性name="day"的標(biāo)簽。
6、找到這些標(biāo)簽之后，接下來判斷上又遇到了麻煩。對于標(biāo)簽內(nèi)容可以用 .innerText（只是文本而不包含其他標(biāo)簽），而對于網(wǎng)頁的內(nèi)容則是.innerHTML。另外，對于選擇的日期值，可以用.value屬性來取。
7、接下來的一個問題是，既要取標(biāo)簽內(nèi)容，又要取所選擇的日期值，如何區(qū)分呢？
可以用.tagName屬性來判斷，如果是INPUT，那么用.value取值，如果是TD，那么用.innerText。
8、假設(shè)沒有選擇日期，那么獲取到的value是什么呢？實驗證明返回了空串，而不是null。如果變量s初始化，那么s的值就是Undefined。
9、字符串的賦值可以用+=運算符，那么代碼s=s+xx ，可以改成s+=xx，這種寫法普遍的寫法，現(xiàn)在連sql語句也是支持的
10、對于代碼中的if else語句，著實覺得寫著不方便，盡然沒有elseif或者elif，而是一定要else，然后再寫if -else。。。
11、i%2 == 1這個是因為i是0、1、2、3，當(dāng)?shù)搅薸=1時，才在變量s中加上分號，效果：
開始日期: 2017-01-03;結(jié)束日期：2017-01-19;
12、輸出結(jié)果放哪里？這里在報表中增加了1行：span標(biāo)簽，name=sp，一開始不會顯示出來。當(dāng)然，要把輸出作為這個標(biāo)簽的內(nèi)容，首先要找到標(biāo)簽，這里通過getElementById來找到標(biāo)簽，然后把輸出結(jié)果放到.innerHTML中就可以了。

PS：這里再為大家推薦幾款比較實用的天數(shù)計算在線工具供大家使用：

在線日期/天數(shù)計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期計算器/相差天數(shù)計算器：
http://tools.jb51.net/jisuanqi/datecalc

在線日期天數(shù)差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

在線天數(shù)計算器：
http://tools.jb51.net/jisuanqi/datejsq

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: