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 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
javascript中var的重要性分析
Feb 11 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
php 全局变量范围分析
2009/08/07 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
python 利用toapi库自动生成api
2020/10/19 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
网吧收银员岗位职责
2013/12/14 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
厂长助理岗位职责
2013/12/27 职场文书
科研课题实施方案
2014/03/18 职场文书
保险公司开门红口号
2014/06/21 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
车间主任岗位职责
2015/02/03 职场文书
学习保证书怎么写
2015/02/26 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA