javascript - 使用javascript向上，向下，向左，向右移动框

Question

所以我想通过将盒子相乘然后去掉下半部分来使盒子向各个方向移动。向上和向右有效，但向下和向左无效。单击 4 个按钮中的 1 个即可调用这些功能。基本的 CSS 和 HTML。我该如何解决这个问题？

var box = document.getElementById("box");
var container = document.getElementById("container");
var time = document.getElementById("time");
let up2 = 1;
let right2 = 1;
let left2 = 1;
let down2 = 1;

function up() {
  box.style.height = 30 + "px";
  box.style.bottom = 30 * up2 + "px";
  up2++;
}

function right() {
  box.style.right = 30 + "px";
  box.style.left = 30 * right2 + "px";
  right2++;
}

function left() {
  box.style.left = 30 + "px";
  box.style.right = 30 * left2 + "px";
  left2++;
}

function down() {
  box.style.bottom = 30 + "px";
  box.style.top = 30 * down2 + "px";
  down2++;
}

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

#box {
  position: absolute;
  background: red;
  width: 30px;
  height: 30px;
  bottom: 0px;
}

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

<br />
<button class="up" onclick="up()">↑</button>

<br />

<button class="right" onclick="left()">←</button>

<button class="left" onclick="right()">→</button>

<br />

<button class="down" onclick="down()">↓</button>

Answer 1

现在剩下要做的就是将值限制为容器的大小 ;-)。

var box = document.getElementById("box");

function up() {
  box.style.top = (parseInt(box.style.top) - 30) + 'px';
}

function right() {
  box.style.left = (parseInt(box.style.left) + 30) + 'px';
}

function left() {
  box.style.left = (parseInt(box.style.left) - 30) + 'px';
}

function down() {
  box.style.top = (parseInt(box.style.top) + 30) + 'px';
}

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

#box {
  position: absolute;
  background: red;
  width: 30px;
  height: 30px;
}

<br />
<button class="up" onclick="up()">↑</button>

<br />

<button class="right" onclick="left()">←</button>

<button class="left" onclick="right()">→</button>

<br />

<button class="down" onclick="down()">↓</button>

<br/>

<div id="container">
  <div id="box" style="top: 0px; left: 0px;"></div>
</div>