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

效果:

点滴积累【JS】---JS小功能(onmouseover实现选择月份)点滴积累【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="width: 400px;">

117                 </div>

118             </td>

119         </tr>

120     </table>

121 </body>

 

你可能感兴趣的:(onmouseover)