颜色变化代码：

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" type="text/css"  href="web6.css">

    <script type="text/javascript" src="web6.js"></script>

    <style type="text/css">

        .red {

            width:100px;

            height:100px;

            background: red;

        }

        .blue{

            width:100px;

            height:100px;

            background: blue;

        }

    </style>

</head>

<body>

<div id="box" class="red">测试zhong</div>

</body>

</html>

　JS　

window.addEventListener('load',function(){

    var box=document.getElementById('box');

    box.addEventListener('click',toBlue,false);

},false);

function toRed() {

   this.className='red';

   this.removeEventListener('click',toRed,false);

   this.addEventListener('click',toBlue,false);

}

function toBlue() {

  this.className='blue';

    this.removeEventListener('click',toBlue,false);

  this.addEventListener('click',toRed,false);

}

　效果：

　16:04:28   2017-09-02

W3C 事件切换 颜色变化的更多相关文章

  1. 他们控制的定义--让背景颜色变化ViewPager逐步幻灯片

    转载请注明出处.谢谢~ 今天想说一个简单但很好的效果达到.代码是绝对简单,达到绝对easy,就是你可能想不到而已. 不多说,上效果图. 第一个效果是仿最美应用的滑动颜色变化,第二个是我项目中要用的效果 ...

  2. iOS 滑动页面标题切换颜色渐变效果

    话不多说,直接上图,要实现类似如下效果. 这个效果非常常见,这里着重讲讲核心功能 封装顶部的PageTitleView 封装构造函数 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 fra ...

  3. Visual Studio 2015 MFC之Button颜色变化-断点调试(Debug)

    软件开发,对自己的程序进行调试很重要,本次文章在上一边随笔的基础上,介绍一下Button控件做显示灯的用法,Button控件的添加和变量设置等可以参考下面的的链接:Visaul Studio 2015 ...

  4. iOS开发--QQ音乐练习,歌词的展示,歌词的滚动,歌词的颜色变化

    一.歌词的展示 -- 首先歌词是在scrollView上,scrollView的大小是两个屏幕的宽度 scrollView滚动修改透明度的代码                             ...

  5. javascript 事件传播与事件冒泡，W3C事件模型

    说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...

  6. IE的事件与w3c事件的区别

    14. offsetWidth, scrollLeft, scrollHeight?     scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollHeig ...

  7. UI设计篇·入门篇·绘制简单自定义矩形图/设置按钮按下弹起颜色变化/设置图形旋转

    Android的基本控件和图形有限,难以满足所有的实际需要和设计需求,好在Android给出了相对完善的图形绘制和自定义控件的API,利用这些API,可以基本满足设计的需求. 自定义图像和控件的方法: ...

  8. easyui之自定义字体图标（鼠标覆盖时切换颜色）

    项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...

  9. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

随机推荐

  1. 记一次SQL Server delete语句的优化过程

    今天测试反应问题,性能测试环境一个脚本执行了3个小时没有出结果,期间其他dba已经建立了一些索引但是没有效果. 语句: DELETE T  from License T  WHERE exists ( ...

  2. ListView 九宫格布局实现

    1.效果图 2.数据 SettingData.json { "data": [{ "icon":"setting", "title ...

  3. python回调函数应用－获取jenkins构建结果

    需求背景: 现在用jenkins构建自动化测试(2个job),公司现将自动化纳入到发布系统 要求每次构建成功之后,把测试结果发送给发布系统.这就需要先获取jenkins构建的结果,如果构建结束,才能发 ...

  4. VMware 虚拟化编程(15) — VMware 虚拟机的恢复方案设计

    目录 目录 前文列表 将已存在的虚拟机恢复到指定时间点 恢复为新建虚拟机 灾难恢复 恢复细节 恢复增量备份数据 以 RDM 的方式创建虚拟磁盘 创建虚拟机 Sample of VirtualMachi ...

  5. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_9_Hashtable集合

    是最早期的双列集合 同步就表示是单线程 value也不允许为空

  6. Winform 开源控件库（ Sheng.Winform.Controls）

    升讯威 .Net WinForm 控件库提供了超过15种 Winform 控件,你可以直接使用本控件库,更可以通过本控件库学到 Winform 控件开发的方法和理念. 你可以学习到: 如何基于 Con ...

  7. C# datatable 导出到Excel

    datatable导出到Excel /// <summary> /// 将DataTable导出为Excel文件(.xls) /// </summary> /// <pa ...

  8. SqlServer 主重复制

    一.准备工作: 主数据库服务器: OS:Windows Server 2008 R2    DB: SQL Server 2008 R2 Hostname : CXMasterDB IP: 192.1 ...

  9. Charls

    1.连接设备 charles--proxy--proxy setting 设置端口号 charles--proxy--ssl proxy setting 设置代理域名 [pc端] charles--p ...

  10. C++笔记（4）——引用及结构体

    引用 C++中有一个很方便的语法叫做引用,作用就是使得函数能够对传入的参数作出全局有效的改动.用法很简单,就是在传入参数的类型后面加上&就可以指明传入的参数是引用. 例子: #include ...