html5 javascript 事件练习2

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

/*#div1{
   background: orange;
   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.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>

天道酬勤，厚积薄发。君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。如有恒，何须三更起，半夜眠；最怕莫，三天打鱼两天晒网，竹篮打水一场空。