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>

赞 (0)

相关推荐

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    前段时间一直找这个的简短实现  网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});

  • js ondocumentready onmouseover onclick onmouseout 样式

    复制代码 代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q

  • 通过onmouseover选项卡实现img图片的变化

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • onmouseover和onmouseout的一些问题思考

    onmouseover和onmouseout的一些问题思考

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.  很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout.  在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse

  • js下关于onmouseout、事件冒泡的问题经验小结

    问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了.在要做浮动层效果的时候会经常遇到这个问题. 解决方法一: 使用jQuery,这个大家都会的: 复制代码 代码如下: <div id="div1">触发显示浮动层</div> <div id="div2"> <ul> <li>1</li>

  • js 阻止子元素响应父元素的onmouseout事件具体实现

    复制代码 代码如下: $(".target-menu").mouseout(function(e){ evt = window.event || e; var obj = evt.toElement || evt.relatedTarget; var pa = this; if(pa.contains(obj)) return false; $(this).hide(); });

  • onmouseover事件和onmouseout事件全面理解

    onmouseover事件和onmouseout事件全面理解

    这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢? 首先实现一个盒子: 给这个盒子上绑定上onmouseover事件和onmouseout事件 发现它们不会发生什么问题,然后(嘿嘿,你懂得!) 让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素 我们依旧只给外层父元素A绑定onm

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

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

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #backcolor        {            width: 400px;            height: 400px;            background: #FFFF00;            tex

  • JS小功能（button选择颜色)简单实例

    JS小功能（button选择颜色)简单实例

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #red        {            width: 260px;            height: 200px;            background: #FF0000;            display:

  • 原生JS实现左右箭头选择日期实例代码

    原生JS实现左右箭头选择日期实例代码

    先上个效果图,就是用左右尖括号可改变中间日期的值.(点击中间显示区域有时间选择器弹框,用的插件就不说了,主要说自己原创的部分) HTML部分 (左右箭头都是用的图片素材,网上一大把,这里我就显示我本地地址了) <div> <span class="leftspan" <span style="color:#FF0000;">onclick="reducedate()"</span>><img

  • 基于JS实现新闻列表无缝向上滚动实例代码

    当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

  • Android 绘制多级树形选择列表实例代码

    Android 绘制多级树形选择列表实例代码

    一.概述 前段时间有个项目的需要在Android端显示一个复选的多层树形控件,主要展示一个公司的组织架构,类似总部下面有各个部门,部门之下是组和员工等.另外需要加上展开与回收部门详情.关闭部分已开展的布局.勾选等功能. 效果图如下: 二.思路分析 毫无疑问,对于这种数据可能达到几千几万行的列表视图,我们需要选择recyclerview等具有回收item功能的控件,因此Item的状态保持放在Model中而不是View中. 由于原始数据是树形结构的,我们需要先将树形结构转换为列表数据,类似根结点 -

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • 用原生JS对AJAX做简单封装的实例代码

    首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

  • JS创建事件的三种方法(实例代码)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

  • iOS实现左右可滑动的选择条实例代码分享

    iOS实现左右可滑动的选择条实例代码分享

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController @end RootViewController.m #import "RootViewController.h" //引入头文件 #import "SVSegmentedControl.h" @interface RootView

随机推荐