JS小功能(onmouseover实现选择月份)实例代码
2013-11-28 00:00
1121 查看
效果:
代码:
代码:
<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>
相关文章推荐
- JS小功能(onmouseover实现选择月份)实例代码
- JS小功能(onmouseover实现选择月份)实例代码
- 点滴积累【JS】---JS小功能(onmouseover实现选择月份)
- 基于 Immutable.js 实现撤销重做功能的实例代码
- js实现弹窗插件功能实例代码分享
- js实现简单登录功能的实例代码
- js实现简单登录功能的实例代码
- 基于jQuery实现仿51job城市选择功能实例代码
- JS+CSS实现分类动态选择及移动功能效果代码
- 原生JS实现左右箭头选择日期实例代码
- 本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考,具体如下: 项目中后台一个商品库,新建活动时动态选择所需商品
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- JS小功能(checkbox实现全选和全取消)实例代码
- js实现页面打印功能实例代码(附去页眉页脚功能代码)
- 基于JS实现checkbox全选功能实例代码
- <转>css中用expression实现js的onmouseover/onmouseout事件
- js实现ArrayList功能附实例代码
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- js实现页面打印功能实例代码(附去页眉页脚功能代码)
- JS实现百度搜索接口及链接功能实例代码