溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript如何輸出所選擇起始與結(jié)束日期

發(fā)布時(shí)間：2021-07-20 11:07:18 來源：億速云 閱讀：160 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何輸出所選擇起始與結(jié)束日期，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體如下：

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

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

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

這個(gè)代碼要在谷歌的chrome瀏覽器中，日期選擇才能有效果(代碼中的input元素Type屬性值date為HTML5元素，需要支持HTML5的瀏覽器運(yùn)行)

代碼如下：

<!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>

寫完這個(gè)代碼后，第一個(gè)感覺是javascript是一個(gè)區(qū)分大小寫的編程語言，在我印象中好像就VB、SQL是不區(qū)分大小寫的，而其他的c#、java、python都是區(qū)分大小寫的，今天在寫js代碼時(shí)，很大一個(gè)坑就是定義的變量是小寫s，但是寫出大寫的S了，過了5分鐘才發(fā)現(xiàn)總是報(bào)錯(cuò)：變量沒有定義。。。

運(yùn)行效果如下：

JavaScript如何輸出所選擇起始與結(jié)束日期

通過這個(gè)例子，我感覺自己對(duì)js 、html更加了解：

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

關(guān)于“JavaScript如何輸出所選擇起始與結(jié)束日期”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手