JS Basic Exercise Simple Calendar

Today learned the basic JS Tutorial 3, yesterday's after-school practice has not come and do, this is similar to the simple calendar of small cases, the video has not heard, continue tonight ...

Look first:

Actually done before the Tab tab, this is very good understanding, through the mouse over the month of the month above and then change the current month's background color, and in the following div display the corresponding information for this month.

Added JS knowledge: array, InnerHTML

JS Code:

1<script type= "Text/javascript" >2 vararr= [' January, what to do at the beginning of the new Year ... ', ' February, Spring comes ... ', ' March, you can go outing ... ', ' the most beautiful April, you are people in April days ... ',3' May, yo, May days oh ... ', ' June, Summer is coming ... ', ' July, summer vacation, really good ... ', ' August, hot, what should I do ...? '.,4' In September, it's time for the new school to learn ... ', ' October, the harvest season, you ... ', ' November, watch the weather change ... ', ' December, over the years ... '];5 6Window.onload=function(){7      varTd=document.getelementsbytagname ("TD");8      varDiv1=document.getelementbyid ("Div1");9             Ten      varI=0; One       for(i=0; i<td.length; i++) A      { -td[i].index=i; -          //alert (i); theTd[i].onmouseover=function() -          { -               for(i=0; i<td.length; i++) -              { +              //alert ("1111"); -Td[i].classname= ""; +              } A               This. Classname= "MouseOver"; atDiv1.innerhtml= " This. index+1) + "month ~ This. Index] + "</p>" ; -          }; -      } -   }; -</script>

Corresponding CSS style, and body content:

<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> January <p>Jan</p> </td> <td> February <p>Feb</p></td> <td> March <p>Mar</p></td> <td> April <p>Apr</p></td></tr>
<tr><td> May <p>May</p></td> <td> June <p>Jun</p></td> <td> July <p>Jue</p></td> <td> August <p>Aug</p></td></tr>
<tr><td> September <p>Sept</p></td> <td> October <p>Oct</p></td> <td > November <p>Nov</p></td> <td> December <p>Dec</p></td></tr>
</table>
<div id= "Div1" ></div>

Note: Here's the calendar for the convenience of my table, can be <ul><li>...</li></ul> this way,

Then because there is currently only one div in the body, so in innerHTML, the direct use of: Var Div1=document.getelementbyid ("Div1");

But when there are multiple div, it should be better: Var Div1=document.getelementbyid ("Div1"). getElementsByTagName ("div") [0];

JS Basic Exercise Simple Calendar