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

【问题标题】：Using keyup to change absolute position using JavaScript使用 keyup 使用 JavaScript 更改绝对位置
【发布时间】：2017-10-15 07:28:16
【问题描述】：

我要做的只是使用箭头键在屏幕上移动一个 div。我对 JavaScript 完全是新手，我写的东西似乎应该可以工作，但事实并非如此。每个 keyUp 都根据它的原始位置而不是 div 的当前位置移动 div。我有什么遗漏吗？

CSS： #典当{ 位置：绝对；左：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>

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

【问题讨论】：

标签： javascript

【解决方案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

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

【讨论】：

我按照你说的做了，问你可以看到这里，它不再移动了吗？ jsfiddle.net/yG6fa
您需要检查初始默认（空）样式值，即 if( pawn.style.left === '' ) pawn.style.left = 0; - 现在可以使用 - jsfiddle.net/yG6fa/2
谢谢。我试过这样做，但做错了。 :)

【解决方案2】：

您需要增加位置值，但还要考虑到您保存的值是一个字符串，因此您需要将其转换回一个数字，以便再次增加它。

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

&lt;div id="pawn"&gt;pawn&lt;/div&gt;

【讨论】：