设置两个按钮,分别用于移动小球和停止小球 小球初始位置:距离文档显示区左上角(30,30) 小球直径:30 开始时,点击移动按钮,小球沿曲线向下向右移动,水平、竖直方向移动步长2,遇到文档区下边框,自动向上向前移动;遇到文档区右边框,原路返回;回到初始位置后,按同样规律移动。
时间: 2024-03-16 12:46:34 浏览: 23
以下是一个简单的HTML和JavaScript代码示例,用于实现您所描述的小球移动和停止的功能。注释中有详细的解释。
```
<!DOCTYPE html>
<html>
<head>
<title>Move and Stop Ball</title>
<style>
#ball {
position: absolute;
top: 30px;
left: 30px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 创建两个按钮 -->
<button id="startBtn">Move Ball</button>
<button id="stopBtn">Stop Ball</button>
<!-- 创建小球 -->
<div id="ball"></div>
<script>
// 获取小球元素
var ball = document.getElementById("ball");
// 定义小球初始位置和移动步长
var x = 30;
var y = 30;
var step = 2;
// 定义小球移动方向和状态
var movingRight = true;
var movingDown = true;
var isMoving = false;
// 定义移动小球的函数
function moveBall() {
// 如果小球正在移动,则更新小球位置
if (isMoving) {
// 更新小球位置
if (movingRight) {
x += step;
} else {
x -= step;
}
if (movingDown) {
y += step;
} else {
y -= step;
}
// 检查小球是否碰到文档区域的边缘
if (x + 30 >= document.documentElement.clientWidth || x <= 0) {
movingRight = !movingRight;
}
if (y + 30 >= document.documentElement.clientHeight || y <= 0) {
movingDown = !movingDown;
}
// 更新小球位置
ball.style.left = x + "px";
ball.style.top = y + "px";
// 继续移动小球
requestAnimationFrame(moveBall);
}
}
// 点击移动按钮时开始移动小球
document.getElementById("startBtn").addEventListener("click", function() {
// 标记小球正在移动
isMoving = true;
// 开始移动小球
moveBall();
});
// 点击停止按钮时停止移动小球
document.getElementById("stopBtn").addEventListener("click", function() {
// 标记小球停止移动
isMoving = false;
});
</script>
</body>
</html>
```
您可以将此代码复制到一个HTML文件中并在浏览器中打开,以查看小球的移动和停止效果。