<!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. 5.动态代理AOP实现-DynamicProxy模式

    通过动态代理模式Interceptor实现在RegUser()方法本身业务前后加上一些自己的功能,如:PreProceed和PostProceed,即不修改UserProcessor类又能增加新功能 ...

  2. Netty WebSocket 开发

    代码: Server package netty.protocol.websocket.server; import io.netty.bootstrap.ServerBootstrap; impor ...

  3. spring 测试类test测试方法

    实例掩码地址为:孔浩组织结构设计 web.xml配置文件: <!-- Spring 的监听器可以通过这个上下文参数来获取beans.xml的位置 --> <context-param ...

  4. Qt中关于QMouseEventbuttons()和QMouseEventbutton()的使用注意

    在进行QT程序开发中经常需要响应鼠标事件,在QWidget或QMainWindow的子类中可以重载如下鼠标事件实现自己需要的效果. virtual void mouseDoubleClickEvent ...

  5. AS 常用快捷键

    上篇中我们讲了Android Studio如何添加插件,这篇我们讲讲AS的快捷键,这里我说明的快捷键都是最最实用的,希望刚刚加入AS的朋友尽快的熟悉一下这几个快捷键,这样可以帮助你提高coding的效 ...

  6. javascript变量作用域 全局及局部

    $("#inStartTime").datetimepicker({ format: 'yyyy-mm-dd hh:ii', autoclose: true, todayBtn: ...

  7. nw.js---开发一个百度浏览器

    使用nw.js开发一个简单的百度浏览器就很简单了,只需要在配置里面写入: { // "main": "index.html", "main" ...

  8. 主流框架的搭建(VUE,React)

    vue脚手架:cnpm install vue vue-cli -gvue init webpack/webpack-simple shuaige(新建文件夹的名字)cd shuaigecnpm in ...

  9. Spring Boot 2.0 新特性和发展方向

    以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持. 内嵌容器包结构调整 为了支持reactive使用场景,内嵌的容器包结构被重构了 ...

  10. 设备树..ing

    .dts==>.dtb ==>device_node ==>  platform_device ==> led_dev.c  ==>匹配 led_drv.c    (设备 ...