消息关闭
    暂无新消息!

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#box {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #999;
}
#box div {
position: absolute;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
background-color: #f00;
transition: all 500ms;
}
</style>
</head>
<body>

<div id="box">
<div></div>
<div></div>
</div>
<script type="text/javascript">
var div = document.getElementById("box").getElementsByTagName("div");
setInterval(function(){
for (var i = 0; i < div.length; i++) {
div[i].style.left = Math.floor(Math.random()*480)+"px";
div[i].style.top = Math.floor(Math.random()*480)+"px";
}
}, 500);
</script>
</body>
</html>


谢谢各位大牛了

2个回答

︿ 2
简单的代码用面向对象的方式写会变的繁琐一些

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#box {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #999;
}
#box div {
position: absolute;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
background-color: #f00;
transition: all 500ms;
}
</style>
</head>
<body>

<div id="box">
<div></div>
<div></div>
</div>
<script type="text/javascript">
function Fix(obj) {
this.div = obj;
}
Fix.prototype.ramove = function () {
this.div.style.left = Math.floor(Math.random()*480)+"px";
this.div.style.top = Math.floor(Math.random()*480)+"px";
}
Fix.prototype.run = function () {
setInterval(this.ramove.bind(this),500);
}

var div = document.getElementById("box").getElementsByTagName("div");
for (var i = 0; i < div.length; i++) {
var d = new Fix(div[i]);
d.run();
}
</script>
</body>
</html>