效果：

代码：

 <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】---JS小功能(onmouseover实现选择月份)的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  3. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  4. 点滴积累【JS】---JS小功能（JS实现动态添加运动属性)

    效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...

  5. 点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...

  6. 点滴积累【JS】---JS小功能（JS实现匀速运动）

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...

  7. 点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）

    效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的 ...

  8. 点滴积累【JS】---JS小功能（列表页面隔行变色）

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

  9. 点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果）

    效果: 代码: <head runat="server"> <title></title> <style type="text/ ...

随机推荐

  1. [典型漏洞分享]一个典型的软件漏洞--memcpy导致的缓冲区溢出

    YS VTM模块存在缓冲区溢出漏洞,可导致VTM进程异常退出[高] 问题描述: YS VTM模块开放对外监听端口(8554和8664),并从外部接收网络数据,中间模块调用到memcpy函数对网络数据进 ...

  2. c# 简单又好用的四舍五入方法

    http://www.soaspx.com/dotnet/csharp/csharp_20100415_3809.html四舍五入是软件开发中经常遇到的问题,我也在不止一个项目中用到这方面的运算:关于 ...

  3. tcpreplay工具使用

    参考:http://www.cnblogs.com/jiayy/p/3447047.html   速率控制算法的大体思路就是,通过适当的sleep,增加包发送的时间,从而减小算出来的速率,以达到用户设 ...

  4. mysql知识点汇总四

    1.表的垂直分割 “垂直分割”是一种把数据库中的表按列变成几张表的方法,这样可以降低表的复杂度和字段的数目,从而达到优化的目的.(以前,在银行做过项目,见过一张表有100多个字段,很恐怖) 示例一:在 ...

  5. C++ Java C#泛型

    泛型概述C#中的泛型C#泛型和java泛型的比较C#泛型和C++模板的比较C#泛型中的约束 泛型概述 Bruce Eckel :您能对泛型做一个快速的介绍么? Anders Hejlsberg : 泛 ...

  6. Unity3d设计模式之单例模式

    单例模式我相信是所有设计模式之中运用最广泛的设计模式之一. 今天我们就来看看在unity中如何使用单例模式,在unity中,我们分两种单例,一种是继承monobehavior的单例,一种是普通单例. ...

  7. iOS:2015年07月最新苹果IOS上架App Store商店步骤

    苹果官方在2015年05-06月开发者中心进行了改版,网上的APP Store上架大部分都不一样了,自己研究总结一下,一个最新的上架教程以备后用. 原文地址:http://www.16css.com/ ...

  8. 用 Chrome 扩展实现修改

      用 Chrome 扩展实现修改 ajax 请求的响应 wincss 4 个月前 背景 Fiddler 和 Charles 是常见的 HTTP 调试器,它们会在本地运行一个代理服务器,可以查看浏览器 ...

  9. python3将docx转换成pdf,html文件,pdf转doc文件

    直接上代码 # -*- encoding:utf-8 -*- """ author:lgh 简单的doc转pdf,html,pdf转doc脚本 依赖库pdfminer3k ...

  10. conkey conf

    update_interval 1.0 # 更新时间间隔double_buffer yes # 双缓存,解决Conky闪烁问题use_xft yes # 自定义字体xftfont DejaVu San ...