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>

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>

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

1 个答案: