js实现小球在页面规定的区域运动
时间：2021-12-06 09:47:49|栏目：JavaScript代码|点击： 次
本文实例为大家分享了js控制小球在规定范围运动的具体代码，供大家参考，具体内容如下
小球在页面规定的区域运动，碰到边界就改变运动方向。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小球运动</title>
<style type="text/css">
#box {
width: 600px;
height: 300px;
border: 1px solid red;
position: relative;
}
#ball {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
button {
position: relative;
}
</style>
</head>
<body>
<div id="box">
<div id="ball">
</div>
</div>
<button id="stop" onclick="fly()">开始</button>
<button id="stop" onclick="stop()">停止</button>
<script type="text/javascript">
var ball = document.getElementById("ball");
//console.log(ball.offsetLeft);
var sport;
function fly() {
var speedx = 1;
var speedy = 1;
sport = setInterval(function () {
ball.style.left = ball.offsetLeft + speedx + 'px';
ball.style.top = ball.offsetTop + speedy + 'px';
if (ball.offsetTop >= 300 -50 || ball.offsetTop <= 0) {
speedy *= -1;
}
if (ball.offsetLeft >= 600 -50 || ball.offsetLeft <= 0) {
speedx *= -1;
}
}, 10)
}
function stop() {
clearInterval(sport); //停止小球的运动
}
</script>
</body>
</html>
效果图：
