html5 javascript 事件练习2
<!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,已下载代码的同学请查看一下 大学立即要毕业了. ...
随机推荐
- 蜕变成蝶~Linux设备驱动中的并发控制
并发和竞争发生在两类体系中: 对称多处理器(SMP)的多个CPU 内核可抢占的单CPU系统 访问共享资源的代码区域称为临界区(critical sections),临界区需要以某种互斥机制加以保护.在 ...
- ABBYY PDF Transformer+安装教程
ABBYY PDF Transformer+是一个新的全功能PDF文档工具,涵盖整个文档生命周期所涉及的各项功能,包括创建.讨论.批准.保护.转换成可编辑格式的PDF文件.文件合并.文本和图像的提取等 ...
- Java & PHP & Javascript 通用 RSA 加密 解密 (长字符串)
系统与系统的数据交互中,有些敏感数据是不能直接明文传输的,所以在发送数据之前要进行加密,在接收到数据时进行解密处理:然而由于系统与系统之间的开发语言不同. 本次需求是生成二维码是通过java生成,由p ...
- JS 使用const声明常量的本质（很多人都有误解）
在我们使用const声明常量时,总认为值一旦声明就不可改变,其实是有误解的: 刚在看ES6标准文档时,仔细阅读了const的解析,恍然大悟的感觉,分享给大家. 本质 const实际上保证的,并不是变量 ...
- [学习笔记]nodejs全局安装和本地安装的区别
参考来源于 nodejs全局安装和本地安装的区别 1.全局安装 $ npm install gulp --global 2.作为项目的开发一开(devDependencies)安装 $ npm ins ...
- lis最长上升子序列
因为是最长上升的,可以用一个数组储存上升的序列,如果后一个数字比数组的最大数字还大,就加到末尾去,如果不大于,那么就可以把这个数组中比他大的数字替换掉,因为如果数字更小,后面上升序列更长的可能性更大, ...
- update条件判断更新
UPDATE cw_party tp, cw_shop tsSET tp.state = 3, ts.bonus_average = CASEWHEN ts.bonus_average > 0 ...
- 把项目挂载到composer上
1.打开composer的安装包列表网站,点击submit 2.把刚才初始化了composer的项目push到github上(至于怎么push,最简单就是用git了) 3.然后把github的网址复制 ...
- webpack应用案例之美团app
记录自己的创建步骤,且对自己的错误进行纠正分析.
- input 设置 width:100% 和padding后宽度超出父节点
input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...