该动画的实现主要利用了css中的style以及setInterval，原理：定时运行设置块元素的位移（style.left、style.top）。
CSS（colorstyle.css）
/*矩形边框的样式设置*/
#rectangle {
width: 500px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
/*圆球的CSS设置*/
#circle {
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
position: absolute;
}JS（anim.js）
/* eslint-disable no-unused-vars */
//获取红色圆球 circle
var circle=document.getElementById('circle');
function startAnim() {
//X的偏移量
var offsetX = 0;
//y的偏移量
var offsetY = 0;
//标识X坐标的行走方向
var isAddX = true;
//标识Y坐标的行走方向
var isAddY = true;
//移动矢量
var value = 10;
//定义水平方向上的移动
function xmove() {
if (isAddX) {
offsetX += value;
if (offsetX >= 470) {
isAddX = false;
}
} else {
offsetX -= value;
if (offsetX <= 0) {
isAddX = true;
}
}
circle.style.left = offsetX + 'px';
}
//定义竖直方向上的移动
function ymove() {
if (isAddY) {
offsetY += value;
if (offsetY >= 270) {
isAddY = false;
}
} else {
offsetY -= value;
if (offsetY <= 0) {
isAddY = true;
}
}
circle.style.top = offsetY + 'px';
}
//设置定时器，同时运行X、Y坐标的移动
setInterval(function() {
xmove();
ymove();
}, 100);
}
引入外联css：
<link rel="stylesheet" href="css/colorstyle.css">引入外联js：
<script src="js/anim.js"></script>HTML定义<div>块元素：
<!--矩形边框-->
<div id="rectangle">
<!--圆球-->
<div id="circle"></div>
</div>定义按钮调用开始动画函数：
<button onclick="startAnim()">开始动画</button>最终效果：
