按下按鍵時，爲什麼此javascript不移動框？正如所料？

-1

我需要創建一個按下'A'或'D'鍵時移動的框。這是代碼，我到目前爲止有：按下按鍵時，爲什麼此javascript不移動框？正如所料？

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script> 
function left(id) 
    { 
     var y = '-5'; 
     var z =document.getElementById(id).style.left; 
     u = parseInt(y)+parseInt(z); 
     var state = document.getElementById(id).style.left; 

     document.getElementById(id).style.left = u; 

    } 

     function right(id) 
     { 
      var r = '5'; 
      var z =document.getElementById(id).style.left; 
      u = parseInt(r)+parseInt(z); 
      var state = document.getElementById(id).style.left; 

      document.getElementById(id).style.left = u; 

     } 



    event.onkeyUp = KeyCheck(); 
    function KeyCheck() 
    { 
     var KeyID = event.keyCode; 

     switch(KeyID) 
     { 
      case 97: left("y"); 
      break; 
      case 100: right("y"); 
      break; 


     } 

    } 
    </script> 
</head> 

<body> 
<div style="position:absolute; height:50px; width:50px; left:100px; right:100px; top:500px; background-color:#03C;" id="y"> 
</div> 
</body> 
</html>

來源

2011-05-12 owen

你的問題是什麼？ – enamrik 2011-05-12 21:48:08

你應該更清楚地表明你的問題。你想回答什麼？如果你想分享代碼，請使用github。如果你想回答一個問題，請在這裏問一個問題。 – Mario 2011-05-12 21:52:43

歡迎來到StackOverflow :)正如@Mario所說，你的問題應該與你在代碼中遇到的特定問題有關。如果它不起作用，試着說出它在做什麼/不做什麼，以及你想做什麼。發佈代碼非常好，但是沒有描述，人們很難進行診斷，並且很多人沒有時間去解決具體問題的準確描述。 – Town 2011-05-12 22:19:00

我知道你的問題被標記爲純JavaScript和多少人恨基於庫的答案，普通的JavaScript的問題，但我真的建議使用庫如jQuery這樣做，以便您不必擔心有關鍵碼處理和事件連接的瀏覽器怪癖。

jQuery的

$(document).keydown(function(e) { 
    var moveBy; 

    switch (e.which) { 
    case 65: // a 
     moveBy = -10; 
     break; 
    case 68: // d 
     moveBy = 10; 
     break; 
    } 
    $('div').css('left', function() { 
     var l = parseInt($(this).css("left")); 
     $(this).css("left", (l + moveBy) + "px"); 
    }); 
});

Working Demo on jsfiddle.net

另外值得一提的是，jQuery的1.6引入了相對值來css()這將意味着你甚至可以進一步簡化代碼，但目前旗下有一個錯誤，防止它從工作 - 計劃在1.6.2固定。

來源

2011-05-12 22:13:18 Town

I fixed your JavaScript for you：

//was:  event.onkeyUp = KeyCheck();  calls KeyCheck(); assigns result! 
      document.onkeyup = KeyCheck; // assigns function object KeyCheck 


//was: function KeyCheck()    ignores Event object argument! 
     function KeyCheck(e)   // need to inspect Event object that is passed 
     { 

//was:  var KeyID = event.keyCode; event is not related to this callback! 
      var KeyID = e.keyCode;  // get keyCode property from passed object 

      switch(KeyID) 
      { 
       case 65: left("y");  // need to use ASCII codes for uppercase 
       break; 
       case 68: right("y"); 
       break; 
      } 
     }

然而，隨着Town suggests，有更好的方法來做到這一點（使用jQuery）。

來源

2011-05-12 22:21:45 Leftium

+1 Leftium，你是一位聖人:)'100'在數字鍵盤上是4的 - 雖然在你的演示中是正確的但是沒有在答案中;） – Town 2011-05-12 22:30:51

@Town：而你在jQuery解決方案中打敗了我調試純JS版本 – Leftium 2011-05-12 22:42:42

按下按鍵時，爲什麼此javascript不移動框？正如所料？

回答

相關問題