javascript - Javascript-动画仅在第一次按下按钮时起作用

我有一个使用onmousedown的动画。我还有另一个停止动画的功能（onmouseup）。

问题在于它只能在第一次使用。我的意思是，当我按住该按钮时，它会起作用，然后在我停止按下时停止，但是如果在第一次之后尝试使用其中一个按钮，则什么也不会发生。它只是不会动。

这是我的HTML代码（index.htm）：

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
    <img id='player' src='img/player.png' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)"><--</button>
        <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">--></button>
    </div>
</body>
</html>


<script type='text/javascript' src='move.js'></script>

这是我的JavaScript代码（move.js）：

var elem = document.getElementById("player");
function OnButtonDownl (button) {
var posl = document.getElementById("player").style.left;
window.idl = setInterval(framel, 5);
function framel() {
    posl--;
    elem.style.left = posl + 'px';
}}
function OnButtonUpl (button) {
    clearInterval(idl);
}

var elem = document.getElementById("player");
function OnButtonDownr (button) {
var posr = document.getElementById("player").style.left;
window.idr = setInterval(framer, 5);
function framer() {
    posr++;
    elem.style.left = posr + 'px';
}}
function OnButtonUpr (button) {
    clearInterval(idr);
}

可能并不重要，但这是我的CSS（style.css）：

body {
  width: 100%;
  height: 100%;
position:relative;
margin:0;
overflow:hidden;
}
#player {
  position: absolute;
  left:0;
  bottom:0;
}
.buttons {
position:absolute;
right:0;
bottom:0;
}

感谢您的任何帮助。

最佳答案

您遇到了2个问题。

初次获得posl和posr时，您得到的是JS强制为0的空字符串。
附加--后，++和px将不起作用（因此将posl和posr设置为string值）

您的posl--（和posr++）可以递增强制的0。这就是为什么它第一次起作用。下次mousedown时，document.getElementById("player").style.left是一个字符串，例如"-1px"，不会被解释为虚假（不会被强制为0）。您可以在缓存parseInt() | posl时使用posr来解决该问题，但是必须提供回退值为0，因为parseInt("")返回NaN…

您可以这样解决（获得posr时会有类似的更改）：

var posl = parseInt( document.getElementById("player").style.left, 10 ) || 0;

var elem = document.getElementById("player");

function OnButtonDownl(button) {
  //var posl = document.getElementById("player").style.left;
  var posl = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idl = setInterval(framel, 5);

  function framel() {
    posl--;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUpl(button) {
  clearInterval(idl);
}

var elem = document.getElementById("player");

function OnButtonDownr(button) {
  //var posr = document.getElementById("player").style.left;
  var posr = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idr = setInterval(framer, 5);

  function framer() {
    posr++;
    elem.style.left = posr + 'px';
  }
}

function OnButtonUpr(button) {
  clearInterval(idr);
}

body {
  width: 100vw;// changed for example only
  height: 100vh;// changed for example only
  position: relative;
  margin: 0;
  overflow: hidden;
}
#player {
  position: absolute;
  left: 0;
  bottom: 0;
}
.buttons {
  position: absolute;
  right: 0;
  bottom: 0;
}

<img id='player' src='//placekitten.com/102/102' />
<div class='buttons'>
  <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)">Left</button>
  <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">Right</button>
</div>

关于javascript - Javascript-动画仅在第一次按下按钮时起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38333542/