源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS小功能(onmouseover实现选择月份)实例代码

  • 时间:2021-10-17 00:04 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS小功能(onmouseover实现选择月份)实例代码
效果: [img]http://files.jb51.net/file_images/article/201311/20131128153252327.jpg[/img] [img]http://files.jb51.net/file_images/article/201311/20131128153402477.jpg[/img] 代码:
[u]复制代码[/u] 代码如下:
<head runat="server">     <title></title>     <style type="text/css">         #backcolor         {             width: 400px;             height: 400px;             background: #FFFF00;             text-align: center;             border: ridge 30pt red;             margin: auto;         }         TD         {             border: ridge 3pt red;             width: 100px;             height: 100px;         }         div         {             width: auto;             height: 100px;             text-align: center;             line-height: 100px;         }     </style>     <script type="text/javascript">         window.onload = function () {             var divArry = document.getElementsByName('divname');             var divto = document.getElementById('div12');             var arry = ['春节', '情人节', '不知道有什么节日!', '清明节', '劳动节', '儿童节',             '好像这个月没有什么重大的节日吧!', '建军节', '教师节', '国庆节', '光棍节', '圣诞节'];             for (var i = 0; i < divArry.length; i++) {                 divArry[i].index = i;                 divArry[i].onmouseover = function () {                     for (var i = 0; i < divArry.length; i++) {                         divArry[i].style.background = '';                     }                     this.style.background = 'red';                     divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';                 }             }         };     </script> </head> <body>     <table id="backcolor">         <tr>             <td>                 <div id="div0" name="divname">                     一月                 </div>             </td>             <td>                 <div id="div1" name="divname">                     二月                 </div>             </td>             <td>                 <div id="div2" name="divname">                     三月                 </div>             </td>             <td>                 <div id="div3" name="divname">                     四月                 </div>             </td>         </tr>         <tr>             <td>                 <div id="div4" name="divname">                     五月                 </div>             </td>             <td>                 <div id="div5" name="divname">                     六月                 </div>             </td>             <td>                 <div id="div6" name="divname">                     七月                 </div>             </td>             <td>                 <div id="div7" name="divname">                     八月                 </div>             </td>         </tr>         <tr>             <td>                 <div id="div8" name="divname">                     九月                 </div>             </td>             <td>                 <div id="div9" name="divname">                     十月                 </div>             </td>             <td>                 <div id="div10" name="divname">                     十一月                 </div>             </td>             <td>                 <div id="div11" name="divname">                     十二月                 </div>             </td>         </tr>         <tr>             <td colspan="4">                 <div id="div12" style="width: 400px;">                 </div>             </td>         </tr>     </table> </body>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部