Javascript使用箭头键将div移动到新位置

我想让一个div能够使用多键支持的箭头键在4个方向上移动（e.x.移动到左上角）onkeypress。当我点击一些箭头时，我希望移动到那个方向，直到我的手指从那个按钮上抬起。虽然这只是一次，但我不明白为什么会这样

功能位置（id、x位置、y位置）{
var元素=document.getElementById（id）；
element.style.position=“绝对”；
element.style.left=x_pos+'px'；
element.style.top=y_pos+'px'；
}
设置间隔（更新，1）；
函数更新（）{
文件。添加的文件列表器（“向下键”，按键）；
}
功能按键（e）{
var x=e.keyCode；
开关（x）{
案例37：
放置（'move'，move.style.left-10，move.style.top）；
打破
案例39：
放置（'move'，move.style.left+10，move.style.top'）；
打破
案例38：
位置（'move'，move.style.left，move.style.top-10）；
打破
案例40：
放置（'move'，move.style.left，move.style.top+10）；
打破
}
//控制台日志（x）；
}

*{
保证金：0；
填充：0；
}
div#move{
背景颜色：黄色；
宽度：5vw；
高度：5vw；
}

---

您不需要设置间隔。只要注册你的监听器，它就会处理每一次按键

document.addEventListener('keydown', keyPress);


function keyPress(e) {
  var x = e.keyCode;
  switch (x) {
    case 37:
     place('move', move.style.left-10,  move.style.top);
      break;

    case 39:
   place('move', move.style.left+10,  move.style.top);
      break;

    case 38:
    place('move', move.style.left,  move.style.top-10);
      break;

    case 40:
     place('move', move.style.left,  move.style.top+10);
      break;
  }
 // console.log(x);
}

---

您不需要设置间隔。只要注册你的监听器，它就会处理每一次按键

document.addEventListener('keydown', keyPress);


function keyPress(e) {
  var x = e.keyCode;
  switch (x) {
    case 37:
     place('move', move.style.left-10,  move.style.top);
      break;

    case 39:
   place('move', move.style.left+10,  move.style.top);
      break;

    case 38:
    place('move', move.style.left,  move.style.top-10);
      break;

    case 40:
     place('move', move.style.left,  move.style.top+10);
      break;
  }
 // console.log(x);
}

---

代码的问题是element.style.left将结果设为10px，当您在10px上加10时，它将是一个类似10px10的字符串，这将使属性值不正确。你需要得到数字的左右

您也不需要将更新函数与带有setInterval的文档绑定。一次就够了

检查下面的代码

功能位置（id、x位置、y位置）{
var元素=document.getElementById（id）；
element.style.position=“绝对”；
element.style.left=x_pos+'px'；
element.style.top=y_pos+'px'；
}
函数更新（）{
文件。添加的文件列表器（“向下键”，按键）；
}
功能按键（e）{
var x=e.keyCode；
var move=document.getElementById（“move”）.getBoundingClientRect（）；
var left=parseInt（move.left，10）；
var top=parseInt（move.top，10）
开关（x）{
案例37：
位置（“移动”，左-10，顶部）；
打破
案例39：
放置（“移动”，左侧+10，顶部）；
打破
案例38：
位置（“移动”，左，前10名）；
打破
案例40：
位置（“移动”，左侧，顶部+10）；
打破
}
//控制台日志（x）；
}
更新（）
*{
保证金：0；
填充：0；
}
div#move{
背景颜色：黄色；
宽度：5vw；
高度：5vw；
}
您的代码的问题是元素.style.left将结果作为10px，当您在10px上添加10时，它将是一个类似10px10的字符串，这将使属性值不正确。由于第一次未设置属性，因此第一个赋值id工作正常。你需要得到数字的左右

您也不需要将更新函数与带有setInterval的文档绑定。一次就够了

检查下面的代码


功能位置（id、x位置、y位置）{
var元素=document.getElementById（id）；
element.style.position=“绝对”；
element.style.left=x_pos+'px'；
element.style.top=y_pos+'px'；
}
函数更新（）{
文件。添加的文件列表器（“向下键”，按键）；
}
功能按键（e）{
var x=e.keyCode；
var move=document.getElementById（“move”）.getBoundingClientRect（）；
var left=parseInt（move.left，10）；
var top=parseInt（move.top，10）
开关（x）{
案例37：
位置（“移动”，左-10，顶部）；
打破
案例39：
放置（“移动”，左侧+10，顶部）；
打破
案例38：
位置（“移动”，左，前10名）；
打破
案例40：
位置（“移动”，左侧，顶部+10）；
打破
}
//控制台日志（x）；
}
更新（）
*{
保证金：0；
填充：0；
}
div#move{
背景颜色：黄色；
宽度：5vw；
高度：5vw；
}

const move=document.getElementById（'move'）；
var-moveLeft=0；
功能方向（e）{
如果（e.keyCode==39）{
左移+=2；
move.style.left=moveLeft+'px'；
如果（左移>=600）{
左移-=2；
}
}
如果（e.keyCode==37）{
左移-=2；
move.style.left=moveLeft+'px'；
}
如果（e.keyCode==38）{
左移-=2；
move.style.top=moveLeft+'px'；
如果（左移>=600）{
左移+=2；
}
}
如果（e.keyCode==40）{
左移+=2；
move.style.top=moveLeft+'px'；
}
}
document.onkeydown=方向
#移动{
位置：绝对位置；
高度：50px；
宽度：50px；
背景颜色：黄色
}

const move=document.getElementById（'move'）；
var-moveLeft=0；
功能方向（e）{
如果（e.keyCode==39）{
左移+=2；
move.style.left=moveLeft+'px'；
如果（左移>=600）{
左移-=2；
}
}
如果（e.keyCode==37）{
左移-=2；
move.style.left=moveLeft+'px'；
}
如果（e.keyCode==38）{
左移-=2；
move.style.top=moveLeft+'px'；
如果（左移>=600）{
左移+=2；
}
}
如果（e.keyCode==40）{
左移+=2；
move.style.top=moveLeft+'px'；
}
}
document.onkeydown=方向
#移动{
位置：绝对位置；
高度：50px；
宽度：50px；
背景颜色：黄色
}