Question

我所要做的就是用箭头键在屏幕上移动一个div。我是JavaScript的全新手，我写的内容似乎应该有效，但事实并非如此。每个keyUp都根据它的原始位置移动div，而不是div的当前位置。有什么我想念的吗？

CSS： #pawn { 位置：绝对; 左：0; 顶部：0; 宽度：50px; 身高：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>

任何人都可以对此有所了解吗？我被困了几个小时。

Answer 1

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

您可以推断如何添加对不同方向/箭头键的支持。

Answer 2

你需要增加位置值，但也需要计算你保存的值是一个字符串，所以你需要将它转换回一个数字，这样你就可以再次增加它。

＆＃13;

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";
  }
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用keyup使用JavaScript更改绝对位置

2 个答案: