Javascript 如何将此长方体的旋转特性一次增加一度？_Javascript_Html_Css

Javascript 如何将此长方体的旋转特性一次增加一度？

javascript html css

Javascript 如何将此长方体的旋转特性一次增加一度？,javascript,html,css,Javascript,Html,Css,我编写了以下代码，试图在每次敲击键盘上的左箭头键时将标识为“player”的框向左旋转一个角度。我试图通过声明一个名为“numberD”的变量并将其设置为0来设置度的初始值。然后我用numberD++递增这个变量；陈述然后，我尝试将numberD中的值插入rotate degrees语句，从而将其附加到后面的语句中我没有收到任何语法错误，但是框没有移动，我知道击键是有效的，因为我附加了一个控制台日志，以便在每次击左键时触发。我认为我的问题是，当我声明numberD时，它不知道如何将它连接到CS

我编写了以下代码，试图在每次敲击键盘上的左箭头键时将标识为“player”的框向左旋转一个角度。我试图通过声明一个名为“numberD”的变量并将其设置为0来设置度的初始值。然后我用numberD++递增这个变量；陈述然后，我尝试将numberD中的值插入rotate degrees语句，从而将其附加到后面的语句中

我没有收到任何语法错误，但是框没有移动，我知道击键是有效的，因为我附加了一个控制台日志，以便在每次击左键时触发。我认为我的问题是，当我声明numberD时，它不知道如何将它连接到CSS元素player的transform属性。如有任何想法，将不胜感激。谢谢

这里还有一个例子

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #1f1f2e;
    margin: 0px;
    padding: 0px;
}
#arena {
    background-color:black;
    margin: 0px;
    padding: 0px;
    width: 500px;
    height: 500px;
}
#player {
    background-color: white;
    width: 10px;
    height: 10px;
    position: relative;
    top:50%;
    left:50%;
    transform:rotate(0deg);
}
</style>
<script>
document.addEventListener("keydown", keyBoardInput);

function keyBoardInput() {
    var i = event.keyCode;
    if (i == 37) {
      numberD = 0;
      numberD ++;
      document.getElementById('player').style.transform = "rotate(" + 
      numberD +"deg)";

    console.log('fired');
    }
}
</script>
<body>
<div id="arena">
    <div id="player"></div>
</div>
</body>

</head>
</html>


身体{
背景色：#1F2E；
边际：0px；
填充：0px；
}
#竞技场{
背景色：黑色；
边际：0px；
填充：0px；
宽度：500px；
高度：500px；
}
#玩家{
背景色：白色；
宽度：10px；
高度：10px；
位置：相对位置；
最高：50%；
左：50%；
变换：旋转（0度）；
}
文件。添加的监听器（“向下键”，键盘输入）；
函数键盘输入（）{
var i=event.keyCode；
如果（i==37）{
numberD=0；
numberD++；
document.getElementById（'player'）.style.transform=“rotate”（+
数字+“度”；
console.log（'fired'）；
}
}

每次调用函数时，都会重置旋转值：

numberD=0；

要解决此问题，必须在函数外部声明变量。您可以将其定义为文档范围的变量：

document.numberD=0
代码如下：
document.addEventListener("keydown", keyBoardInput);
document.numberD = 0;

    function keyBoardInput() {
    var i = event.keyCode;

    if (i == 37) {

      document.numberD++;
        document.getElementById('player').style.transform = "rotate(" + document.numberD + "deg)";
        console.log('fired');
      }
    }

这里有一个
您每次调用键盘输入
都会将numberD
的值重置回0
。您需要在该函数之外初始化变量。很好的一点，只是尝试了一下，但是盒子还是不动？我的意思是你需要删除numberD=0语句并将其移到函数外。好的，它是有效的，是的，谢谢你的解释！我明白我错在哪里了