Question

之前的 QUESTION 让我构建了以下代码。我想要做的是根据键盘箭头选择

向上/向下/向左/向右递增元素

"<div id="test"></div>"

每次20像素（或者我选择多少）。我的“左”和“右”方向大部分都在起作用，但当我尝试改变方向时，一些有趣的东西不断发生。首先，我最初选择的方向首先在第一次按键时不起作用，我必须按两次向左或向右的箭头键开始转换。然后一旦转换开始工作;如果我向左行驶然后想改变方向;即使我按下正确的键至少一次，然后它正确的方向对应我选择的键，它就会向左移动。这有点难以通过文字解释，所以这里是代码笔，所以你可以看到我的意思。 CODEPEN （点击左右箭头键几次以便清楚地看到问题）

此外，函数moveDown（）和moveUp（）甚至根本不移动框定位。为了尝试解决这个问题，我添加了console.log（'moveUp'）和console.log（'moveDown'），以便查看控制台是否在识别密钥时识别密钥代码，而且很明显。它甚至可以识别我敲击左键还是右键但仍然至少运行一次错误的方向，然后才能开始在左右键上找到正确的方向。

我感觉它与转换未被清除有关，或者使用IF语句可能不是读取密钥代码的基本方法？

还考虑使用switch case进行JavaScript密钥代码识别，但我很确定问题仍然是相同的，而且还不够熟练，无法启用switchcase。

我想要的所有是我按照键盘上的箭头指示去的方框，我很接近，但你可以看到我错过了一些关键概念

document.addEventListener("keydown", keyBoardInput);
var left = 0;
var top = 0;


function moveUp() {
  console.log('moveUp');
  document.getElementById("test").style.top = top + "px";
  top -= 20;
  document.getElementById("test").style.transition = "all 1s";
};

function moveDown() {
  console.log('moveDown');
  document.getElementById("test").style.top = top + "px";
  top += 20;
  document.getElementById("test").style.transition = "all 1s";
};

function moveLeft() {
  console.log('moveLeft');
  document.getElementById("test").style.left = left + "px";
  left -= 20;
  document.getElementById("test").style.transition = "all 1s";
};

function moveRight() {
  console.log('moveRight');
  document.getElementById("test").style.left = left + "px";
  left += 20;
  document.getElementById("test").style.transition = "all 1s";
};

function keyBoardInput() {
  var i = event.keyCode;

  if (i == 38) {
    moveUp()
  };

  if (i == 40) {
    moveDown()
  };

  if (i == 37) {
    moveLeft()
  };

  if (i == 39) {
    moveRight()
  };
};

#test {
  position: relative;
  width: 30px;
  border: 1px solid blue;
  height: 10px;
  top: 0px;
  left: 0px;
}

<div id="test"></div>

Answer 1

在CSS中设置之前，您需要对顶部和左侧进行算术运算：）

function moveUp() {
  console.log('moveUp');
  top -= 20;
  document.getElementById("test").style.top = top + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveDown() {
  console.log('moveDown');
  top += 20;
  document.getElementById("test").style.top = top + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveLeft() {
  console.log('moveLeft');
  left -= 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveRight() {
  console.log('moveRight');
  left += 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

这是一个工作小提琴：https://jsfiddle.net/x2yxexs9/

Answer 2

2个问题：你更新了你的全局变量，只是在元素上使用之前就这样做了。变量名“top”是保留的，只需使用另一个（参见this blog post）。代码如下：

ionic emulate windows

document.addEventListener("keydown", keyBoardInput);
var left = 0;
var topx = 0;


function moveUp() {
  console.log('moveUp');
  topx -= 20;
  document.getElementById("test").style.top = topx + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveDown() {
  console.log('moveDown');
  topx += 20;
  document.getElementById("test").style.top = topx + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveLeft() {
  console.log('moveLeft');
  left -= 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveRight() {
  console.log('moveRight');
  left += 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function keyBoardInput() {
  var i = event.keyCode;

  if (i == 38) {
    moveUp()
  };

  if (i == 40) {
    moveDown()
  };

  if (i == 37) {
    moveLeft()
  };

  if (i == 39) {
    moveRight()
  };
};

#test {
  position: relative;
  width: 30px;
  border: 1px solid blue;
  height: 10px;
  top: 0px;
  left: 0px;
}

使用JavaScript增加元素位置的问题

2 个答案: