Question

我想使一个div能够在支持多键的情况下通过4个方向的箭头键移动（例如，移动到左上角）按下键。当我单击某些箭头时，我希望朝那个方向移动，直到我将手指从该按钮上抬起为止。尽管此举只是一次，但我不知道为什么会发生。

function place(id,x_pos, y_pos) {
  var element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos+'px';
  element.style.top = y_pos+'px';
}
setInterval(update,1);

function update(){
   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);
}

*{
  margin:0;
  padding:0;
  }
div#move{
  background-color:yellow;
  width:5vw;
  height:5vw;
 
  }

<div id='move'></div>

Answer 1

您的代码存在的问题是 element.style.left 给出的结果为10px，当您在10px上添加10时，它将是一个类似于 10px10 的字符串属性值不正确。由于第一次未设置属性，因此第一个分配ID工作正常。您需要获得左右数值。

您也不需要将更新功能与具有setInterval的文档绑定。一次就够了。

检查下面的代码

function place(id,x_pos, y_pos) {
  var element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos+'px';
  element.style.top = y_pos+'px';
}


function update(){
   document.addEventListener('keydown', keyPress);
}
  
function keyPress(e) {
  var x = e.keyCode;
  
  var move = document.getElementById("move").getBoundingClientRect();
 
  var left = parseInt(move.left,10);
  var top = parseInt(move.top,10)
    
  switch (x) {
    case 37:
     place('move', left -10,  top);
      break;

    case 39:
   place('move', left+10,  top);
      break;

    case 38:
    place('move', left,  top-10);
      break;

    case 40:
     place('move', left,  top+10);
      break;
  }
 // console.log(x);
}
update();

*{
  margin:0;
  padding:0;
  }
div#move{
  background-color:yellow;
  width:5vw;
  height:5vw;
 
  }

<div id='move'></div>

Answer 2

您不需要setInterval。只需注册您的听众，它将处理每次按键。

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);
}

Answer 3

const move=document.getElementById('move');

var moveLeft = 0;

function direction(e){
    if(e.keyCode==39){   
        moveLeft +=2;
        move.style.left = moveLeft + 'px';
        if(moveLeft>=600){
            moveLeft -=2;
        }
    }
    if(e.keyCode==37){    
        moveLeft -=2;
        move.style.left = moveLeft + 'px';
        
    }
    if(e.keyCode==38){   
        moveLeft -=2;
        move.style.top = moveLeft + 'px';
        if(moveLeft>=600){
            moveLeft +=2;
        }
    }
    if(e.keyCode==40){   
        moveLeft +=2;
        move.style.top = moveLeft + 'px';
    }
}

document.onkeydown = direction;

#move{
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: yellow
}

<div id="move"></div>

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

3 个答案: