今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续......
先看效果图:
其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月份上面进而改变当前月的背景颜色,并在下面的div中显示这个月的相应信息。
新增js知识:数组,innerHTML
js代码:
<script type="text/javascript">
var arr= ['一月,新年伊始,該做點什麽呢....','二月,春天來了....','三月,可以去踏青......','最美四月,你是人間四月天....',
'五月,喲,五月天哦.....','六月,夏天要來了吧...','七月,暑假了,真好....','八月,天熱,該做點什麽呢....',
'九月,新學期到了,好好學習....','十月,豐收的季節,你呢....','十一月,注意天氣變化...','十二月,過年了.....']; window.onload=function(){
var td=document.getElementsByTagName("td");
var div1=document.getElementById("div1"); var i=0;
for(i=0; i<td.length; i++)
{
td[i].index=i;
//alert(i);
td[i].onmouseover=function()
{
for(i=0; i<td.length; i++)
{
//alert("1111");
td[i].className="";
}
this.className="mouseover";
div1.innerHTML="<h4>這是第" + (this.index+1) + "個月~</h4><p>" + arr[this.index] +"</p>" ;
};
}
};
</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];