点滴积累【JS】---JS小功能(onmouseover实现选择月份)

效果：
代码：
  1 <head runat="server">
  2     <title></title>
  3     <style type="text/css">
  4         #backcolor
  5         {
  6             width: 400px;
  7             height: 400px;
  8             background: #FFFF00;
  9             text-align: center;
 10             border: ridge 30pt red;
 11             margin: auto;
 12         }
 13         TD
 14         {
 15             border: ridge 3pt red;
 16             width: 100px;
 17             height: 100px;
 18         }
 19         div
 20         {
 21             width: auto;
 22             height: 100px;
 23             text-align: center;
 24             line-height: 100px;
 25         }
 26     </style>
 27     <script type="text/javascript">
 28         window.onload = function () {
 29             var divArry = document.getElementsByName('divname');
 30             var divto = document.getElementById('div12');
 31             var arry = ['春节', '情人节', '不知道有什么节日！', '清明节', '劳动节', '儿童节',
 32             '好像这个月没有什么重大的节日吧！', '建军节', '教师节', '国庆节', '光棍节', '圣诞节'];
 33             for (var i = 0; i < divArry.length; i++) {
 34                 divArry[i].index = i;
 35                 divArry[i].onmouseover = function () {
 36                     for (var i = 0; i < divArry.length; i++) {
 37                         divArry[i].style.background = '';
 38                     }
 39                     this.style.background = 'red';
 40                     divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
 41                 }
 42             }
 43         };
 44     </script>
 45 </head>
 46 <body>
 47     <table id="backcolor">
 48         <tr>
 49             <td>
 50                 <div id="div0" name="divname">
 51                     一月
 52                 </div>
 53             </td>
 54             <td>
 55                 <div id="div1" name="divname">
 56                     二月
 57                 </div>
 58             </td>
 59             <td>
 60                 <div id="div2" name="divname">
 61                     三月
 62                 </div>
 63             </td>
 64             <td>
 65                 <div id="div3" name="divname">
 66                     四月
 67                 </div>
 68             </td>
 69         </tr>
 70         <tr>
 71             <td>
 72                 <div id="div4" name="divname">
 73                     五月
 74                 </div>
 75             </td>
 76             <td>
 77                 <div id="div5" name="divname">
 78                     六月
 79                 </div>
 80             </td>
 81             <td>
 82                 <div id="div6" name="divname">
 83                     七月
 84                 </div>
 85             </td>
 86             <td>
 87                 <div id="div7" name="divname">
 88                     八月
 89                 </div>
 90             </td>
 91         </tr>
 92         <tr>
 93             <td>
 94                 <div id="div8" name="divname">
 95                     九月
 96                 </div>
 97             </td>
 98             <td>
 99                 <div id="div9" name="divname">
100                     十月
101                 </div>
102             </td>
103             <td>
104                 <div id="div10" name="divname">
105                     十一月
106                 </div>
107             </td>
108             <td>
109                 <div id="div11" name="divname">
110                     十二月
111                 </div>
112             </td>
113         </tr>
114         <tr>
115             <td colspan="4">
116                 <div id="div12" style=" 400px;">
117                 </div>
118             </td>
119         </tr>
120     </table>
121 </body>