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

Issues with using JavaScript to increment the position of an element

本文关键字：问题 位置 元素 JavaScript 增加 使用      更新时间：2023-09-26

我之前的QUESTION让我构造了下面的代码。我想做的是根据键盘箭头选择向上/向下/向左/向右增加元素

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

一次减少20个像素(或者我选择了多少(。我的"左"answers"右"方向在很大程度上起作用，但当我尝试改变方向时，一些有趣的事情不断发生。首先，无论我最初选择哪个方向，第一次按键都不起作用，我必须按两次左右箭头键才能开始转换。一旦过渡开始工作；如果我向左行驶，然后想向右改变方向；它向左走，即使我至少打了一次右键，然后它就朝着与我选择的键相对应的正确方向走了。这有点难以用文字来解释，所以这是代码笔，这样你就可以明白我的意思了CODEPEN(点击左右箭头键几次，以便清楚地看到问题(

此外，函数moveDown((和moveUp((甚至根本不会移动盒子的位置。为了解决这个问题，我添加了console.log("移动向上"(和console.log("移动向下"(，以查看控制台在我敲击时是否识别出了关键代码，而且它确实识别出了。它甚至可以识别我何时按下左键或右键，但在开始按左键和右键的正确方向之前，它至少会朝着错误的方向运行一次。

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

还考虑过使用switchcase进行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>

2个问题：您更新全局变量太晚了，只需在元素上使用它之前进行更新。变量名称"top"是保留的，只需使用另一个即可(请参阅本文(。这里的代码：

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;
}
<div id="test"></div>

在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/

相关文章：