颜色变化代码：

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. [Codeforces 274E]:Mirror Room（模拟）

    题目传送门 题目描述 有一个$n\times m$的格子图,其中有一些是黑色的,另一些为白色.从某个白色格子的中心点向左上($NW$),左下($SW$),右上($NE$),右下($SE$)四个方向中的 ...

  2. 通用 C# DLL 注入器injector(注入dll不限)

    为了方便那些不懂或者不想用C++的同志,我把C++的dll注入器源码转换成了C#的,这是一个很简单实用的注入器,用到了CreateRemoteThread,WriteProcessMemory ,Vi ...

  3. python-网络编程urllib模块

    一.操作网络发送请求 from urllib.request import urlopen   #发送请求 from urllib.parse import urlencode   #用来把字典形式转 ...

  4. javascript实现保留两位小数的多种方法

    第一种方法:javascript实现保留两位小数一位自动补零代码实例:第一种方法介绍一下如何实现对数字保留两位小数效果,如果数字的原本小数位数不到两位,那么缺少的就自动补零,这个也是为了统一的效果,先 ...

  5. 不起眼的vim.转自https://blog.csdn.net/iplayvs2008/article/details/51508599

    如果我的关于这个话题的最新帖子没有提醒到你的话,那我明确地说,我是一个 Vim 的粉丝.所以在你们中的某些人向我扔石头之前,我先向你们展示一系列“鲜为人知的 Vim 命令”.我的意思是,一些你可能以前 ...

  6. centos7安装配置jdk、tomcat

    centos7安装jdk1.8 1.新建文件夹java,上传文件jdk-8u111-linux-x64.tar.gz到java文件夹 2.解压tar包: tar -zxvf jdk-8u111-lin ...

  7. airtestUI简单操作

    touch 判断坐标位置 如touch((500, 600), duration=1) swipe 滑动位置 wait 等待画面出现 exists 判断画面中是否存在某个图片 test 调用输入法,输 ...

  8. Vue 基础 day03

    定义Vue 组件 什么是组件:组件的出现,就是为了拆分 Vue 实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件: 组件化和模块化的不同: ...

  9. python工程的结构

    1 python系统库的位置 大部分系统库在/usr/lib64/python2.7目录下,但是像sys模块,是python内置的库,是用c实现的,直接连接进了python.exe中了. 也就是说,在 ...

  10. Appium+Python之生成html测试报告

    思考:测试用例执行后,如何生成一个直观漂亮的测试报告呢? 分析:1.unittest单元测试框架本身带有一个textTestRunner类,可以生成txt文本格式的测试报告,但是页面不够直观 2.我们 ...