键码在 JavaScript 中不起作用

Question

这不会在按下左右箭头时移动框。 如果您能提供帮助，请在评论中发布。

window.addEventListener("keydown", testkey , false );
var el = document.getElementById("player");
//changes the x position by a value
function changex(num) {
    el.style.left = ((num + el.style.left) + "px");
}
//changes the y position by a value
function changey(num2) {
    el.style.top = ((num2 + el.style.top) + "px");
}
//sets x and y position of box
function setpos(x, y) {
    el.style.left = (x + "px");
    el.style.top = (y + "px");
}
//this returns the key that is pressed
function testkey(e) {
    if (e.keyCode == "37") {
        //left key
        changex(-10);
    }
    else if (e.keyCode == "39") {
        //right key
        changex(10);
    }
}
setpos(0,0);

Answer 1

我看到两个问题：

第一

您正在向字符串添加数值，这会导致串联。例如：
((num + el.style.left) + "px")等价于 10 + 0px + px ，这会产生类似 100pxpx 的字符串。这不是有效的 CSS 值。

我建议使用 parseInt 将现有样式值从字符串转换为数字：
el.style.left = parseInt(el.style.left) + num + "px";

有关进一步参考，请参阅获取不带"px;"后缀的样式值的数字。

第二

您需要先定位元素，然后才能使用 left、right、top 或bottom CSS 定义。MDN指出，left（例如）仅适用于"定位元素"。

下面，我使用了position:absolute，但任何有效的仓位值都可以。

有关进一步的参考，请参阅 css "left" 不起作用。

工作示例

window.addEventListener("keydown", testkey, false);
var el = document.getElementById("player");
function changex(num) {
  el.style.left = parseInt(el.style.left) + num + "px";
}
function changey(num) {
  el.style.top = parseInt(el.style.top) + num + "px";
}
function setpos(x, y) {
  el.style.left = (x + "px");
  el.style.top = (y + "px");
}
function testkey(e) {
  switch (e.keyCode) {
    case 37: changex(-10); break;
    case 38: changey(-10); break;
    case 39: changex(10); break;
    case 40: changey(10); break;
    default:
  }
}
setpos(0, 0);

#player {
  position: absolute;
}

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

Answer 2

在changex()和changey()函数中，您正在尝试在数字和字符串之间进行计算。 num以数字形式出现，但el.style.left是字符串"0px"。 像这样parseInt() el.style.left周围，它可以工作：

el.style.left = ((num + parseInt(el.style.left)) + "px");

还要确保您的player元素已通过 CSS 应用position:absolute。