js實現小球在頁面規定的區域運動
阿新 • • 發佈：2020-06-18
本文例項為大家分享了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>效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。