首页帮我写一个js小球在方框内随机运动

帮我写一个js小球在方框内随机运动

时间: 2023-07-15 16:12:35 浏览: 144

好的，以下是一个简单的实现： ```html <!DOCTYPE html> <html> <head> <title>小球运动</title> <style type="text/css"> #container { width: 500px; height: 500px; border: 1px solid #000; position: relative; } #ball { width: 30px; height: 30px; border-radius: 50%; background-color: red; position: absolute; } </style> </head> <body> <div id="container"> <div id="ball"></div> </div> <script type="text/javascript"> var container = document.getElementById("container"); var ball = document.getElementById("ball"); //获取容器的宽高 var containerWidth = container.offsetWidth; var containerHeight = container.offsetHeight; //定义小球的初始位置和速度 var x = 0; var y = 0; var speedX = 5; var speedY = 5; //定时器，每隔10毫秒更新小球位置 setInterval(function() { //更新位置 x += speedX; y += speedY; //判断是否碰到边界，如果是则反弹 if (x <= 0 || x >= containerWidth - ball.offsetWidth) { speedX = -speedX; } if (y <= 0 || y >= containerHeight - ball.offsetHeight) { speedY = -speedY; } //更新小球位置 ball.style.left = x + "px"; ball.style.top = y + "px"; }, 10); </script> </body> </html> ``` 该代码实现了一个小球在方框内随机运动的效果，你可以在浏览器中打开查看。

阅读全文