使用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

在这里您可以看到另一个示例。

class box{
 constructor() {  
   this.box = document.getElementById("box");
   this.container = document.getElementById("container");
   this.y = 1;
   this.x = 1;
 }
draw(){
  this.box.style.top = this.y + "px";
  this.box.style.left = this.x + "px";
}
up() {
  this.y += -30;
  this.draw()
}
 right() {
 this.x += 30;
    this.draw()
}
 left() {
   this.x += -30;
    this.draw()
 
}
  down() {
    this.y += 30;  
     this.draw()
  }
}

 var box2 = new box();


box2.draw()

#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="box2.up.call(box2)">↑</button>

<br />

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

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

<br />

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

Answer 2

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

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>