如何一次增加此框的旋轉屬性一度？

我已經寫了下面的代碼，試圖在每次敲擊鍵盤上的左箭頭鍵時將標識爲「玩家」的方框向左旋轉一度。我嘗試通過聲明一個名爲「numberD」的變量並將其設置爲0來設置度數的初始值。然後，我使用數字D ++遞增該變量;聲明。然後我嘗試將numberD中的值附加到循環度聲明中的語句後面。如何一次增加此框的旋轉屬性一度？

林沒有得到任何語法錯誤但是盒子是不動的，我知道的擊鍵工作，因爲我連着控制檯日誌火每次我打左鍵時間。我認爲我的問題是，當我聲明numberD時，它不知道將它連接到CSS元素播放器的transform屬性。任何想法，將不勝感激。謝謝！

對於這個例子也是繼承人CODEPEN LINK。

<!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>

來源

2017-07-30 Ghoyos

你重置numberD'的'值回每次調用'keyBoardInput'時都會調用'0'。您需要在該函數之外初始化該變量。 – 4castle

好點，剛試過，但是盒子仍然不會移動？ https://codepen.io/hoyos/pen/WEraVK?editors=0010 – Ghoyos

我的意思是你需要刪除'numberD = 0;'語句並將它移到函數之外。 [篩選]（https://codepen.io/anon/pen/oebQXY?editors=0010） – 4castle

每次調用函數時，重置價值，爲旋轉：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'); 
     } 
    }

這裏是一個working example.

來源

2017-07-30 21:19:42

像一個魅力thx工程！ – Ghoyos

如何一次增加此框的旋轉屬性一度？

回答

相關問題