javascript - 使用 onkeydown javascript 移动 div

Question

我正在尝试使用箭头键(37 和 39)使我的 div 移动，并按空格键让 div 在 keydown 上出现并在 keyup 上消失。但问题是:我希望当我按下空格键时 div 继续移动。现在，当我这样做时，div 停止移动。

我以为将键放入数组中会起作用，但事实并非如此，您有什么建议可以帮助我吗？ :)

代码必须使用 JavaScript。

var keysPressed = new Array();
window.onkeydown = keyDownHandler;
window.onkeyup = keyUpHandler;

function keyDownHandler(e){
    var s="";
    keysPressed[e.which] = true;
    Key = window.event.keyCode;
    s+=Key+" activee:" + keysPressed[e.which];
    updateKeys();
    document.getElementById("moveDiv").innerHTML  = s;
}

function keyUpHandler(e){
     s="";
     keysPressed[e.which] = false;
     Key = window.event.keyCode;
     s+=Key+" activee:" + keysPressed[e.which];
     updateKeys();
     document.getElementById("moveDiv").innerHTML  = s;
}
    var left=0;
    var top = 0;
function updateKeys(){
    if(keysPressed[39]){
        document.getElementById("moveDiv").style.left = left + 10+"px";
        left += 10;
    }
    if(keysPressed[37]){
        document.getElementById("moveDiv").style.left = left -10+"px";
        left-=10;
    }
    if(keysPressed[32]){
        document.getElementById("show").style.display = "block";
    }
    if(!keysPressed[32]){
        document.getElementById("show").style.display = "none";
    }

}

HTML:

<div style="position:absolute;" id="moveDiv"></div>
<div style="position:absolute; 
                left:500px; 
                top:500px; 
                display: none;" id="show">Pressed spacebar</div>

Answer 1

这是您想要实现的目标吗？

Fiddle

function updateKeys() {
    if (keysPressed[0])
        left -= speed;
    if (keysPressed[2])
        left += speed;
    if (keysPressed[1])
        top -= speed;
    if (keysPressed[3])
        top += speed;

    document.getElementById("moveDiv").style.left = left + "px";
    document.getElementById("moveDiv").style.top = top + "px";
    if (spacePressed)
        document.getElementById("show").style.display = "block";
    else
        document.getElementById("show").style.display = "none";
}

setInterval(updateKeys, 1);

Read about setInterval if you are not familiar with it

它基本上设置了一个函数每隔所述毫秒运行一次，在本例中，每 1 毫秒执行一次函数 updateKeys。