html5 javascript 事件练习2

最新推荐文章于 2022-08-04 07:49:17 发布

weixin_33868027

最新推荐文章于 2022-08-04 07:49:17 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/houweidong/p/9378608.html

版权

<!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>
   

<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.οnmοusemοve=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.οnmοusemοve=houzimove;
</script>
</body>
</html>