javascript - 让按钮移动 div 不同的量

Question

所以我有三个按钮，每个按钮都会触发一个事件。在触发事件的同时，我希望它在单击的按钮旁边移动一个 div。问题是我不希望它传送到按钮旁边，而是以动画方式移动到那里。我的代码组织如下所示，但它只发生一次，然后当我尝试单击不同的按钮时，div 会保留在那里。

function func1() {
  var elem = document.getElementById("thebarofpower");
    var pos = elem.style.top;
  var doneTheStuff;
    var id = setInterval(frame, 10);
    function frame() {
  if (!doneTheStuff) {
    doneTheStuff = true;
  } else if (pos == 6) {
            clearInterval(id); 
        } else if (pos > 6) {
            pos++; 
            elem.style.top = pos - 'px';  
        } else {
          pos++;
          elem.style.top = pos + 'px';  
        }
    }
    }
    
    function func2() {
  var elem = document.getElementById("thebarofpower");
    var pos = elem.style.top;
    var doneTheStuff;
    var id2 = setInterval(frame2, 10);
    function frame2() {
       if (!doneTheStuff) {
    doneTheStuff = true;
  } else if (pos == 60) {
            clearInterval(id2); 
        } else if (pos > 60) {
            pos++; 
            elem.style.top = pos - 'px';  
        } else {
          pos++;
          elem.style.top = pos + 'px';  
        }
    }
    }
        function func3() {
  var elem = document.getElementById("thebarofpower");
    var pos = elem.style.top;
    var doneTheStuff;
    var id3 = setInterval(frame3, 10);
    function frame3() {
          if (!doneTheStuff) {
    doneTheStuff = true;
  } else if (pos == 120) {
            clearInterval(id3); 
        } else {
            pos++; 
            elem.style.top = pos + 'px';  
        }
    }
    }

#button-1 {
  position: absolute;
  background: transparent;
  left: 0px;
  top: 0px;
  width: 50px;
  height: 50px;
  border: ;
  box-shadow: 6px 6px 6px #888888;
}
#button-2 {
  position: absolute;
  background: transparent;
  left: 0px;
  top: 60px;
  width: 50px;
  height: 50px;
  border: ;
  box-shadow: 6px 6px 6px #888888;
}
#button-3 {
  position: absolute;
  background: transparent;
  left: 0px;
  top: 120px;
  width: 50px;
  height: 50px;
  border: ;
  box-shadow: 6px 6px 6px #888888;
}

#thebarofpower{
  position: absolute;
  background-color: #42bff4;
  width: 2px;
  height: 50px;
  left: 70px;
  top: 0px;
  border-radius: 30px;
  box-shadow: 0px 0px 10px 1px #41d0f4;
}

<button id="button-1" onclick="func1()"></button>
<button id="button-2" onclick="func2()"></button>
<button id="button-3" onclick="func3()"></button>
<div id="thebarofpower"></div>

Answer 1

主要问题是，将 style.top 更改为数字加 px 后，下次检查时必须考虑到这一点。在某些情况下，您的方向是错误的。

function func1() {
  var elem = document.getElementById("thebarofpower");
  var pos = elem.style.top;
  if (pos[pos.length-2] == "p") pos = pos.slice(0, pos.length -2)
  var doneTheStuff;
  var id = setInterval(frame, 10);

  function frame() {
    if (!doneTheStuff) {
      doneTheStuff = true;
    } else if (pos == 6) {
      clearInterval(id);
    } else if (pos > 6) {
      pos--;
      elem.style.top = pos + 'px';
    } else {
      pos++;
      elem.style.top = pos + 'px';
    }
  }
}

function func2() {
  var elem = document.getElementById("thebarofpower");
  var pos = elem.style.top;
  if (pos[pos.length-2] == "p") pos = pos.slice(0, pos.length -2)
  var doneTheStuff;
  var id2 = setInterval(frame2, 10);

  function frame2() {
    if (!doneTheStuff) {
      doneTheStuff = true;
    } else if (pos == 60) {
      clearInterval(id2);
    } else if (pos > 60) {
      pos--;
      elem.style.top = pos + 'px';
    } else {
      pos++;
      elem.style.top = pos + 'px';
    }
  }
}

function func3() {
  var elem = document.getElementById("thebarofpower");
  var pos = elem.style.top;
  if (pos[pos.length-2] == "p") pos = pos.slice(0, pos.length -2)
  var doneTheStuff;
  var id3 = setInterval(frame3, 10);

  function frame3() {
    if (!doneTheStuff) {
      doneTheStuff = true;
    } else if (pos == 120) {
      clearInterval(id3);
    } else {
      pos++;
      elem.style.top = pos + 'px';
    }
  }
}

#button-1 {
  position: absolute;
  background: transparent;
  left: 0px;
  top: 0px;
  width: 50px;
  height: 50px;
  border: ;
  box-shadow: 6px 6px 6px #888888;
}

#button-2 {
  position: absolute;
  background: transparent;
  left: 0px;
  top: 60px;
  width: 50px;
  height: 50px;
  border: ;
  box-shadow: 6px 6px 6px #888888;
}

#button-3 {
  position: absolute;
  background: transparent;
  left: 0px;
  top: 120px;
  width: 50px;
  height: 50px;
  border: ;
  box-shadow: 6px 6px 6px #888888;
}

#thebarofpower {
  position: absolute;
  background-color: #42bff4;
  width: 2px;
  height: 50px;
  left: 70px;
  top: 0px;
  border-radius: 30px;
  box-shadow: 0px 0px 10px 1px #41d0f4;
}

<button id="button-1" onclick="func1()"></button>
<button id="button-2" onclick="func2()"></button>
<button id="button-3" onclick="func3()"></button>
<div id="thebarofpower"></div>