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

【问题标题】：Javascript - Animation only working the first time the button is pressedJavascript - 动画仅在第一次按下按钮时起作用
【发布时间】：2016-07-12 15:46:47
【问题描述】：

我有一个使用 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;
}

提前感谢您的帮助。

【问题讨论】：

你能加个plunkr吗？
第二次尝试按下按钮时控制台是否显示任何内容？

标签： javascript html css animation

【解决方案1】：

您遇到了 2 个问题。

当您第一次获得posl 和posr 时，您将获得一个空字符串，JS 将其强制转换为0。
在附加 px 后，-- 和 ++ 将不起作用（因此将 posl 和 posr 设置为 string 值）

你的posl--（和posr++）可以增加强制0。这就是为什么它第一次通过。下次你mousedown 时，document.getElementById("player").style.left 是一个字符串——比如"-1px"——不会被解释为虚假（不会被强制转换为0）。您可以在缓存 posl|posr 时使用 parseInt() 来解决这个问题，但您必须提供 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>

【讨论】：

【解决方案2】：

我正在重写你的代码并且它工作（对我来说）。

function Move(elem){
    this.interval;

    var posr = parseInt(getComputedStyle(document.getElementById("player")).left);

    this.handleEvent = function(event) {
      switch (event.type) {
        case 'mousedown':
            this.interval = setInterval(function() {
                if (event.target.id == 'moveright') {
                    posr++;
                } else if (event.target.id == 'moveleft'){
                    posr--;
                }
                document.getElementById("player").style.left = posr + 'px';

            },5);
            break;
        case 'mouseup':
            clearInterval(this.interval);
            break;
      }
  }
  elem.addEventListener('mousedown', this,  false);
  elem.addEventListener('mouseup', this,  false);

}

var button_right = document.getElementById("moveright");
var button_left = document.getElementById("moveleft");

Move(button_right);
Move(button_left);

并且在 html 中你可以移除 js 事件监听器（这个只需要 id）。

【讨论】：

【解决方案3】：

首先，最好将脚本标签放在 html 标签中：

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

检查一下这个解决方案：

HTML：

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
    <img id='player' src='https://placeimg.com/54/45/any' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDown('left')" onmouseup="OnButtonUp()"><--</button>
        <button id='moveright' onmousedown="OnButtonDown('right')" onmouseup="OnButtonUp()">--></button>
    </div>

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

还有js：

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

var posl = document.getElementById("player").style.left;

function OnButtonDown(button) {
b = button;
nIntervId = setInterval(frame, 5);
}

function frame() {
  if(b==='left'){
    posl--;
    elem.style.left = posl + 'px';}
  else{
    posl++;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUp() {
    clearInterval(nIntervId);
}

http://output.jsbin.com/varaseheru/

【讨论】：