<!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的更多相关文章
-
html5 javascript 事件练习3键盘控制练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
-
html5 javascript 事件练习3随机键盘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
-
html5 javascript 事件练习1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
-
【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
-
JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
-
JavaScript事件类型
JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...
-
JavaScript事件总结
JavaScript 事件总结 本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加 ...
-
javaScript事件(六)事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
-
【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐 新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...
随机推荐
-
Struts2中通过超链接传参数要注意的问题
写到分页的功能,在传递页码pageNo的时候遇到了参数接收不正确的问题,我本来在action中是定义了一个pageNo字符串参数和一个Page类参数,Page是一个封装了页面要显示的数据集合和页面信息 ...
-
IDEA工具使用说明
IDEA使用说明 1.安装 2.开始界面 1)create New Project (新建项目) 2)Import Project (导入项目) 3)Open (打开已有的项目) 4)Check o ...
-
Mysql之高可用
使用缓存Memcache, 1,可使用Hash算法由客户端决定路由到哪个Memcache服务器上:客户端完全不用关心数据存储在哪个Memcache服务器上:完全隔离了客户端与服务端:由于是Hash,在 ...
-
MySQL复制-设置延迟复制
mysql> stop slave ; Query OK, 0 rows affected (0.00 sec) mysql> change master to master_delay= ...
-
eclipse格式化代码
在Eclipse下安装.使用Jalopy方法 http://hi.baidu.com/zdz8207/item/c2972e172ad3efdcbf9042d6 http://www.cnblogs. ...
-
[转]python类方法
Python定义类-方法 公有方法.私有方法.类方法.静态方法
-
jQuery 1.9不支持$.browser 怎么判断浏览器类型和版本
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());$.browser.webkit = /webkit/.te ...
-
MFC自绘控件学习总结第二贴---转
首先感谢大家对第一帖的支持,应一些网友烈要求下面我在关于上一贴的一些补充和说明(老鸟可以无视)这一贴是实战+理论不知道第一帖的先看第一帖:http://topic.csdn.net/u/2011071 ...
-
【也许CTO并不是终点开篇】CTO也只不过是CTO罢了
不想做将军的士兵不是好士兵,这句话可以有很功利的理解方式,对应到我们自己很可能是:不想做CTO的程序员不是好程序员!几年前对这句话的理解与现在有很多不同,因为我现在已经是一名中小型公司的CTO了,这句 ...
-
关于Unicode
http://www.unicode.org/faq/utf_bom.html 有关UTF或编码表单的一般问题 Unicode是16位编码吗? Unicode文本可以以多种方式表示吗? 什么是UTF? ...