使用基調來改變使用JavaScript的絕對位置

我所要做的只是簡單地使用我的箭頭鍵在屏幕上移動div。我完全是JavaScript的新手，我寫的東西好像應該可以工作，但事實並非如此。每個keyUp都會根據原始位置移動div，而不是div的當前位置。有什麼我失蹤？使用基調來改變使用JavaScript的絕對位置

CSS：＃pawn { position：absolute; left：0; top：0; width：50px; height：50px; }

的JavaScript

function showKeyCode(e) { 

    var pawn = document.getElementById("pawn"); 

    if(e.keyCode == "37") { 
     console.log("left"); 
     pawn.style.left = -50+"px"; 
    } 
    if(e.keyCode == "38") { 
     console.log("up"); 
     pawn.style.top = -50+"px"; 
    } 
    if(e.keyCode == "39") { 
     console.log("right"); 
     pawn.style.left = +50+"px"; 
    } 
    if(e.keyCode == "40") { 
     console.log("down"); 
     pawn.style.top = +50+"px"; 
    } 
}

HTML：

<body onKeyUp="showKeyCode(event);"> 
    <div id="pawn"></div> 
</body>

任何人都可以照這個一些啓示？我被困了好幾個小時。

來源

2014-02-06 Ellenbrook

pawn.style.left屬性是文本，所以你實際上並沒有遞增值。本質上說，任務「將其設置爲正/負50+"px";每次。

你需要的值轉換爲整數，然後添加新的值，然後將其設置爲px值。

一jQuery中非常基本的演示：

$(function(){ 
    $('body').on('keyup', function(e){ 
    var pawn = $('#pawn'); 
    var newLeft = parseInt(pawn.css('left')) + 50; 
    pawn.css('left',newLeft+'px'); 
    }); 
});

Codepen

可以推斷如何添加了不同的方向/箭頭鍵支持

。

來源

2014-02-06 03:16:31 helion3

我沒有你所說的，問什麼你可以在這裏看到，它不再動作？ http://jsfiddle.net/yG6fa/ – Ellenbrook

你需要檢查初始默認（空）樣式值，例如'if（pawn.style.left ===''）pawn.style.left = 0;' - it現在作品 - http://jsfiddle.net/yG6fa/2/ – helion3

謝謝。我試圖做到這一點，但做得不對。 :) – Ellenbrook

您需要增加位置值，但也要計算您保存的值是一個字符串，因此您需要將其轉換回數字，以便可以再次增加。

var pawn = document.getElementById("pawn"); 
 
var move = 50; 
 

 
document.body.addEventListener('keyup', showKeyCode); 
 

 
function showKeyCode(e) { 
 
    var num = 0; 
 
    if(e.keyCode === 37) { 
 
    num = parseInt(pawn.style.left, 10) || 0; 
 
    num -= move; 
 
    pawn.style.left = num + "px"; 
 
    } 
 
    if(e.keyCode === 38) {  
 
    num = parseInt(pawn.style.top, 10) || 0; 
 
    num -= move; 
 
    pawn.style.top = num + "px"; 
 
    } 
 

 
    if(e.keyCode === 39) { 
 
    num = parseInt(pawn.style.left, 10) || 0; 
 
    num += move; 
 
    pawn.style.left = num + "px"; 
 
    } 
 

 
    if(e.keyCode === 40) { 
 
    num = parseInt(pawn.style.top, 10) || 0; 
 
    num += move; 
 
    pawn.style.top = num + "px"; 
 
    } 
 
}

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    font-family: "Trebuchet MS", sans-serif; 
 
    background-color: #ECEFF1; 
 
} 
 

 

 
#pawn { 
 
    background-color: #B0BEC5; 
 
    color: white; 
 
    width: 100px; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 20px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<div id="pawn">pawn</div> \t

來源

2017-10-14 23:28:16 jgatjens

使用基調來改變使用JavaScript的絕對位置

回答

相關問題