<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习-变化的颜色</title>
    <style type="text/css">

#div1{
margin: 15px auto;
margin-top: 200px;
background: orange;
width: 200px;
height: 200px;
border-radius: 200px;
 }
</style>
</head>

<body>
    <div id="div1"></div>

<script>
var dd=document.getElementById('div1');
dd.onclick=houzi1;

function houzi1(){
    dd.style.background='red';
    // dd.onclick=houzi2;
    setTimeout('houzi2()',500);
}

function houzi2(){
    dd.style.background='orange';
    // dd.onclick=houzi3;
    setTimeout('houzi3()',500);
}
function houzi3() {
    dd.style.background='blue';
    // dd.onclick=houzi1;
    setTimeout('houzi2()',500);
}
</script>

</body>
</html>

html5 javascript 事件练习1的更多相关文章

  1. html5 javascript 事件练习3键盘控制练习

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. html5 javascript 事件练习3随机键盘

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. html5 javascript 事件练习2

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  5. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  6. JavaScript事件类型

    JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...

  7. JavaScript事件总结

    JavaScript 事件总结   本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加 ...

  8. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  9. 【教程】HTML5+JavaScript编写flappy bird

         作者: 风小锐      新浪微博ID:永远de风小锐      QQ:547953539      转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...

随机推荐

  1. HTML空格占位符

    == 普通的英文半角空格   ==   ==   == no-break space (普通的英文半角空格但不换行) 　 == 中文全角空格 (一个中文宽度)   ==   == en空格 (半个中文 ...

  2. 项目中phpexcel的基本用法

    前提:要下载PHPEXCEL库文件 如:phpexcel官方下载    ,本人使用下载 情形一:对于将数据写入EXCEL表中的用法 header("content-type:text/htm ...

  3. ajax json struts JSP传递消息到action返回数据到JSP

    ACTION package actions; import com.opensymphony.xwork2.ActionSupport; import net.sf.json.JSONObject; ...

  4. 真正让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦

    转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...

  5. 阻止a链接跳转方法总结

    总结下a标签阻止默认行为的几种简单方法(1) <a href="javascript:void(0);" > 点我 </a> onclick方法负责执行js ...

  6. python什么时候加self，什么时候不加self

    1.self是什么,一般都说指对象本身,这样说了没了用,说了后还是很难懂,因为这样说了后,仍然完全搞不清楚,什么时候变量前需要加self,什么时候不需要加self. 造成很多人,已经怕了self,不停 ...

  7. VS2017 安装打包插件

    安装 打开VS2017:工具 --> 扩展和更新 --> 联机,搜索Microsoft Visual Studio 2017 Installer Projects,如下图: 在搜索中输入: ...

  8. ZooKeeper-3.3.4集群安装配置

    https://blog.csdn.net/shirdrn/article/details/7183503

  9. mssql for xml path使用

    准备工作: CREATE TABLE [dbo].[Students]( [id] [int] IDENTITY(1,1) NOT NULL, [names] [varchar](50) NULL, ...

  10. java项目（学习和研究）

    java项目就是研究,不断的对项目进行迭代,把产品做的越来越好,就是research. 自己想着做一个java项目把,可以类似牛客网,想好自己的预期产品,在设计的过程中可以不断改进和扩展,在做这个项目 ...