javascript - 我怎样才能把盒子移到拐 Angular 处

Question

我想移动拐 Angular 处的方框(从左上角开始水平移动 Angular 落到右上角然后你去到右下角。

function myMove() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<p><button onclick="myMove()">Click Me</button></p>

<div id="container">
  <div id="animate"></div>
</div>

Answer 1

你可以如下设置top和left的距离，让它每次都在一个方向上移动，并在总行进距离满足位置时停止:

function myMove() {
  var elem = document.getElementById("animate");
  var left = 0;
  var top = 0;
  var id = setInterval(frame, 5);
  elem.style.left = "0px";
  elem.style.top = "0px"

  function frame() {
    if (left < 350 && top == 0) {
      left++;
      elem.style.left = left + "px";
    } else if (left == 350 && top < 350) {
      top++;
      elem.style.top = top + "px";
    } else if (top == 350 && left > 0) {
      left--;
      elem.style.left = left + "px";
    }
    else {
      clearInterval(id);
    }
  }
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

<p><button onclick="myMove()">Click Me</button></p>
<div id="container">
  <div id="animate"></div>
</div>