<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>baoll</title> <style> *{ margin: 0; padding: 0; } #myball{ width: 128px; height: 128px; position: absolute; border-radius: 50%; background-color: red; } </style> </head> <body> <div id="myball"></div> <script> var myBall = document.getElementById("myball"); var ys = 0; var yv = 10; var xs = 0; var xv = 10; var cilentHeight = document.documentElement.clientHeight; var cilentWidth = document.documentElement.clientWidth; var ballHeight = 128; var ballWidth = 128; var heightDifference = cilentHeight-ballHeight; var widthDifference = cilentWidth-ballWidth; setInterval(function(){ //y轴数据； ys += yv; if(ys >= heightDifference){ ys = heightDifference; yv = -yv; } if(ys <= 0){ yv = -yv; } myBall.style.top = ys + "px"; //x轴数据； xs += xv; if(xs >= widthDifference){ xs = widthDifference; xv = -xv; } if(xs <= 0){ xv = -xv; } myBall.style.left = xs + "px"; },10) </script> </body> </html>