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

/*#div1{
    background: orange;
    width: 200px;
height: 200px;
padding: 15px;
border-radius: 200px;
position: absolute;
 }*/
</style>
</head>

<body>
    <!-- <div id="div1"></div> -->
    
<script>
// var dd=document.getElementById('div1');

// function movehouzi(e){
// var sy=document.documentElement.scrollTop||document.body.scrollTop
// dd.style.left=e.clientX+'px';
// dd.style.top=e.clientY+sy+'px';
//}
// document.onmousemove=movehouzi;

function houzimove(e){
var num=30;
var divs=document.getElementsByTagName('div');
var body=document.getElementsByTagName('body')[0];
for (var i = 0; i < num; i++) {
    var rad=Math.floor(Math.random()*10)+'px';
    divs[i]=document.createElement('div');
    divs[i].style.background='rgb('+4*i+','+2*i+','+i+')';
    divs[i].style.width=divs[i].style.height=rad;
    divs[i].style.position='absolute';
    divs[0].style.left=e.clientX+'px';
    divs[0].style.top=e.clientY+'px';
    divs[i].style.left=e.clientX+Math.floor(Math.random()*10*i)+'px';
    divs[i].style.top=e.clientY+Math.floor(Math.random()*10*i)+'px';
    body.appendChild(divs[i]);
    }
}
document.onmousemove=houzimove;
</script>
</body>
</html>

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

  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 事件练习1

    <!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. 21 go并发编程-下

    如何等待一组goroutine结束 1. 使用不带缓冲区的channel实现. 原理: 每个goroutine都往一个channel里写入一个值,然后我们去遍历这个管道的数值,由于不带缓冲区,那么必须 ...

  2. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  3. python使用requests发送application/x-www-form-urlencoded请求数据

    def client_post_formurlencodeddata_requests(request_url,requestJSONdata): #功能说明:发送以form表单数据格式(它要求数据名 ...

  4. Android的TextView设置padding无效

    I finally found the problem I have to set the background first before setting the padding. Setting t ...

  5. Linux下的搜索查找命令的详解(whereis)

    2.whereis  和find相比,whereis查找的速度非常快,这是因为linux系统会将 系统内的所有文件都记录在一个数据库文件中,当使用whereis和下面即将介绍的locate时,会从数据 ...

  6. Kylin如何进行JDBC方式访问或者调用

    Kylin提供了标准的ODBC和JDBC接口,能够和传统BI工具进行很好的集成.分析师们可以用他们最熟悉的工具来享受Kylin带来的快速.我们也可以对它进行定制开发报表等,把kylin当做数据库服务器 ...

  7. 对unicode数据进行部分replace

    unicode = u'\u9879\u76ee\u7ba1\u7406\u90e8' print unicode #项目管理部 unicode = unicode.replace("项目& ...

  8. php算法题2

    一群猴子排成一圈,按1,2,…,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去…,如此不停的进行下去,直到最后只剩下一只猴子为止,那只猴子就叫做大 ...

  9. js中的值类型和引用类型的区别

    1.JavaScript中的变量类型有哪些? (1)值类型(基本类型):字符串(String).数值(Number).布尔值(Boolean).Undefined.Null  (这5种基本数据类型是按 ...

  10. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...