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


Posted in Javascript onNovember 28, 2013

效果:

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

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

代码:

<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>
Javascript 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
jQuery插件的写法分享
Jun 12 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
jquery实现拖动效果
Aug 10 Javascript
jquery validate表单验证插件
Sep 06 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 #Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 #Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 #Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 #Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 #Javascript
javascript打印html内容功能的方法示例
Nov 28 #Javascript
javascript列表框操作函数集合汇总
Nov 28 #Javascript
You might like
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
8个实用的jQuery技巧
2014/03/04 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JS实现购物车特效
2017/02/02 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
基于pip install django失败时的解决方法
2018/06/12 Python
详解python里的命名规范
2018/07/16 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
django中ImageField的使用详解
2020/12/21 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
高性能装备提升营地:Kammok
2019/02/27 全球购物
银行工作检查书范文
2014/01/31 职场文书
接待员岗位责任制
2014/02/10 职场文书
公立医院改革实施方案
2014/03/14 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS