js基础练习之简易日历

浏览数：42 / 时间：2015年06月09日

今天学到了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内容：

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，可以是<ul><li>...</li></ul>这样子，

然后因为目前body中只有一个div，所以在innerHTML时，直接用的： var div1=document.getElementById("div1");

但是当有多个div时，应该这样会更好：var div1=document.getElementById("div1").getElementsByTagName("div")[0];

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js基础练习之简易日历