<!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. Centos7.0下Nexus私服搭建

    1.下载nexus wget https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.11.2-03-bundle.tar. ...

  2. 我们正在招聘java工程师，想来美团工作吗？

    我们希望你有? 1.3年以上Java服务器开发经验,精通Java及面向对象设计开发,熟悉主流web框架 2.熟悉网络编程,熟悉TCP/IP协议,熟悉互联网应用协议 3.有大规模分布式系统设计与开发经验 ...

  3. windows环境下redis启动加到服务中

    前置条件: 1.命令运行在redis-server.exe目录下  2.cmd命令  安装命令: redis-server.exe --service-install redis.windows.co ...

  4. chmod chown

    chmod以及chown,其中可以用递归参数-R来实现更改所有子文件和子目录的权限. 1.利用chmod修改权限: 对Document/目录下的所有子文件与子目录执行相同的权限变更: chmod -R ...

  5. 新唐MCU常用的工具软件

    ICP   在电路编程  需要NULINK ISP   在系统编程,可通过串口或USB PINVIEW 可以显示管脚目前的状态.提供keil下或者单独运行两种模式.Keil下进入debug模式后,点击 ...

  6. ux.form.field.Month 只能选年、月的时间扩展

    效果如图,亲测6.2.1版本可用,用法同时间选择控件 //月弹窗扩展 //只选月 Ext.define('ux.picker.Month', { extend: 'Ext.picker.Month', ...

  7. A - The Water Problem

    In Land waterless, water is a very limited resource. People always fight for the biggest source of w ...

  8. A - 不要62

    杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士司机和乘客的心理障碍 ...

  9. express.js graphql express-graphql

    文档 创建应用 const l = console.log; var express = require("express"); var graphqlHTTP = require ...

  10. linux 系统全盘恢复

    恢复备份 一.准备 1. 从 u盘启动,进入 live-cd 系统,配置好网络和镜像源,更新一下仓库的数据库. sudo pacman -Syy 2. 安装 timeshift 这个软件. sudo ...