<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #333;}
ul,li{list-style: none;}
body{font-size: 14px;font-family: "微软雅黑";}
.box{width:100px;height:100px;background:red;border-radius: 50%;position:absolute;left:0px;top:0px;}
</style>
</head>
<body>
<script type="text/javascript">
for(var i=0;i<=10;i++){
var div=document.createElement("div");
document.body.appendChild(div);
div.className="box";
div.x=0;//开始值
div.y=0;
div.xspeed=i+2;//速度
div.yspeed=i+2;
div.onclick=function(){
var dom=arr.splice(arr.indexOf(this),1);//找到每一个
this.parentNode.removeChild(dom[0]);
}
var divClass=document.getElementsByClassName("box");
var arr=[].slice.call(divClass);//转换成数组
}
function play(){
for(var j=0;j<arr.length;j++){
var boxDome=arr[j];
var maxW=document.innerWidth-boxDome.offsetWidth;
var maxH=document.innerHeight-boxDome.offsetHeight;
boxDome.x+=div.xspeed;
boxDome.y+=div.yspeed;
if(boxDome.x<0){
boxDome.x=0;
boxDome.xspeed=-div.xspeed;
}
if(boxDome.x>maxW){
boxDome.x=maxW;
boxDome.xspeed=-div.xspeed;
}
if(boxDome.y<0){
boxDome.y=0;
boxDome.yspeed=-div.yspeed;
}
if(boxDome.y>maxH){
boxDome.y=maxH;
boxDome.yspeed=-div.yspeed;
}
boxDome.style.left=boxDome.x+'px';
boxDome.style.top=boxDome.y+'px';
}
}
play();
setInterval(play,1000/30);
</script>
</body>
</html>
小球控制不了,应该是10个怎么看到1个?两个问题
相关分类