javascript - 如何使用 javascript 使元素来回移动？

Question

所以我有一个黑条，我想连续上下移动，直到我点击停止按钮。目前黑色元素根本没有移动，我敢肯定，如果它移动了，停止按钮就不会起作用。我希望黑条在碰到其容器（蓝色元素）的边缘时上下反弹。最终，我想创建一个游戏，您必须在绿色区域内停止黑条，并且每次正确操作时，它都会变得更快，并且绿色区域会随机移动，但我想一次一步。我对 java 脚本非常了解，并且努力想办法让它工作。我的代码目前位于此

function load() {
  var barMove = document.getElementById("small-bar");
  var pos = 600;
  var go = setInterval(start, 5);

  function start() {

    if (pos == 0) {
      pos--;
      barMove.style.top = pos + 'px';
    } else if (pos == 600) {
      pos++;
      barMove.style.bottom + 'px';
    }



  }
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

#container {
  position: relative;
  background-color: brown;
  height: 800px;
  width: 800px;
  margin: 0 auto;
  margin-top: 75px;
}

#big-bar {
  position: relative;
  height: 600px;
  width: 200px;
  background: blue;
  left: 300px;
  top: 100px;
  overflow: hidden;
  border-radius: 20px 20px 20px 20px;
}

#medium-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 2;
  position: absolute;
  height: 100px;
  width: 200px;
  background: green;
  top: 200px;
}

#small-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 3;
  position: absolute;
  height: 50px;
  width: 200px;
  background: black;
  top: 600px;
}

#btn-go {
  position: absolute;
  top: 20px;
  right: 600px;
  padding: 5px 20px;
  border-radius: 10px;
  background: gold;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

#btn-stop {
  position: absolute;
  top: 20px;
  right: 75px;
  padding: 5px 20px;
  border-radius: 10px;
  background: red;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

<div id="container">

  <div id="big-bar">

    <div id="medium-bar"></div>
    <div id="small-bar"></div>
  </div>

  <input id="btn-go" type="button" value="Go !" onclick="load()">
  <input id="btn-stop" type="button" value="Stop !" onclick="clearInterval(go)">

</div>

标签： javascriptanimationsetintervalclearinterval

Answer 1

您的逻辑是这样说的...如果 pos 为零，则从 pos 中减去 1。否则，如果 pos 等于 600，则加一。除此之外，它不会调整它。

应该是这样的

var dir = 1;
var pos = 0;
function start () {
  if (pos>600) dir=-1
  else if (pos<0) dir=1
  pos += dir
  barMove.style.top = pos + 'px';
}

---

编辑它的工作......

var interval;

function load() {
  var barMove = document.getElementById("small-bar");
  var pos = 600;
  interval = setInterval(start, 5);

  var dir = 1;
  var pos = 0;

  function start() {
    if (pos > 600) dir = -1
    else if (pos < 0) dir = 1
    pos += dir
    barMove.style.top = pos + 'px';
  }

}

function stop() {
  window.clearInterval(interval);
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

#container {
  position: relative;
  background-color: brown;
  height: 800px;
  width: 800px;
  margin: 0 auto;
  margin-top: 75px;
}

#big-bar {
  position: relative;
  height: 600px;
  width: 200px;
  background: blue;
  left: 300px;
  top: 100px;
  overflow: hidden;
  border-radius: 20px 20px 20px 20px;
}

#medium-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 2;
  position: absolute;
  height: 100px;
  width: 200px;
  background: green;
  top: 200px;
}

#small-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 3;
  position: absolute;
  height: 50px;
  width: 200px;
  background: black;
  top: 600px;
}

#btn-go {
  position: absolute;
  top: 20px;
  right: 600px;
  padding: 5px 20px;
  border-radius: 10px;
  background: gold;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

#btn-stop {
  position: absolute;
  top: 20px;
  right: 75px;
  padding: 5px 20px;
  border-radius: 10px;
  background: red;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

<div id="container">

  <div id="big-bar">

    <div id="medium-bar"></div>
    <div id="small-bar"></div>
  </div>

  <input id="btn-go" type="button" value="Go !" onclick="load()">
  <input id="btn-stop" type="button" value="Stop !" onclick="stop()">

</div>