JavaScript 利用定时器setInterval实现不断来回移动碰撞动画

该动画的实现主要利用了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：

引入外联js：

HTML定义

块元素：

定义按钮调用开始动画函数：

开始动画

最终效果：