js基礎練習之簡易日曆

標籤：

今天學到了js基礎教程3，昨天的課後練習還沒來的及做，這個是類似簡易日曆的小案例，視頻還沒聽完，今晚繼續......

先看：

其實做過前面的Tab選項卡，這個就很好理解了，通過滑鼠放在不同月份月份上面進而改變當前月的背景顏色，並在下面的div中顯示這個月的相應資訊。

新增js知識：數組，innerHTML

js代碼：

 1 <script type="text/javascript"> 2 var arr= [‘一月，新年伊始,該做點什麽呢....‘,‘二月,春天來了....‘,‘三月，可以去踏青......‘,‘最美四月,你是人間四月天....‘, 3              ‘五月，喲，五月天哦.....‘,‘六月,夏天要來了吧...‘,‘七月,暑假了，真好....‘,‘八月,天熱，該做點什麽呢....‘, 4              ‘九月,新學期到了，好好學習....‘,‘十月,豐收的季節，你呢....‘,‘十一月,注意天氣變化...‘,‘十二月,過年了.....‘]; 5  6  window.onload=function(){ 7      var td=document.getElementsByTagName("td"); 8      var div1=document.getElementById("div1"); 9             10      var i=0;11      for(i=0; i<td.length; i++)12      {13          td[i].index=i;14          //alert(i);15          td[i].onmouseover=function()16          {17              for(i=0; i<td.length; i++)18              {19              //alert("1111");20              td[i].className="";21              }22              this.className="mouseover";23              div1.innerHTML="<h4>這是第" + (this.index+1) + "個月~</h4><p>" + arr[this.index] +"</p>" ;24          };25      }26   };27 </script>

相應css樣式，及body內容：

<style type="text/css"> table{ width:400px; height:300px; text-align:center; background:url(pic/qq1.jpg); border:#CCC 1px solid; margin-left:300px; margin-top:100px;} table td{width:100px;border:#F0F 1px solid ;}

div{width:400px; height:100px; margin-left:300px; margin-top:2px; background:url(pic/qq1.jpg); border:#F0F 1px solid;} .mouseover{ background-color:#FFF;} </style>

 <table>
   <tr><td> 一 月<p>Jan</p> </td> <td> 二 月<p>Feb</p></td> <td>三 月<p>Mar</p></td> <td> 四 月<p>Apr</p></td></tr>
   <tr><td> 五 月<p>May</p></td>  <td>六 月<p>Jun</p></td>  <td> 七 月<p>Jue</p></td>  <td> 八月<p>Aug</p></td></tr>
   <tr><td>九 月<p>Sept</p></td>  <td> 十 月<p>Oct</p></td> <td> 十一月<p>Nov</p></td> <td>十二月<p>Dec</p></td></tr>
 </table>
 <div id="div1"></div>

注意：這裡的日曆為了方便我用的table，可以是<ul><li>...</li></ul>這樣子，

然後因為目前body中只有一個div，所以在innerHTML時，直接用的： var div1=document.getElementById("div1");

但是當有多個div時，應該這樣會更好：var div1=document.getElementById("div1").getElementsByTagName("div")[0];

 

js基礎練習之簡易日曆