Question

<!DOCTYPE HTML>
<html>

<head>
  <title>circle</title>
  <style>
    .circle {
      width: 32px;
      height: 32px;
      border-radius: 32px;
      background: darkred
    }
  </style>
</head>

<body>

  <div class="circle" id="ball" style="position:relative; left: 20px; top: 400px;"></div>
  <input type="text" onkeypress="pressFunction(event)">
  <p id="demo"></p>

  <script>
    function pressFunction(event) {
      var x = event.which;

      if (parseInt(x, 10) == 119) {
        jump();
      }
    }

    function jumpup() {
      document.getElementById("demo").innerHTML = "hey"
      document.getElementById("ball").style.top = parseInt(document.getElementById("ball").style.top, 10) + parseInt(10, 10) + "px";
    }

    function jumpdown() {
      document.getElementById("ball").style.top = parseInt(document.getElementById("ball").style.top, 10) + parseInt(-10, 10) + "px";
      document.getElementById("demo").innerHTML = "no"
    }

    var jumpingup = window.setInterval(function() {
      jumpup()
    }, 50);
    var jumpingdown = window.setInterval(function() {
      jumpdown()
    }, 50);

    function jump() {
      jumpingup;
      setTimeout(clearInterval(jumpingup), 100);
      jumpingdown;
      setTimeou(clearInterval(jumpingdown), 100);
    }
  </script>
</body>

</html>

function jump(){
    window.setInterval(function(){
    document.getElementById("ball").style.top= parseInt(document.getElementById("ball").style.top, 10) + parseInt(speedy,10) +"px"; 
}, 20)
    window.setInterval(function(){
    document.getElementById("ball").style.top= parseInt(document.getElementById("ball").style.top, 10) + parseInt(-1*speedy,10) +"px"; 
}, 20)
}

我有一个球，我想用window.setInterval(function())举起这个球然后移回它的坐标。我以为我可以执行window.setInterval(function())一段时间然后打破它但我无法想象如何打破循环。有没有办法做到这一点？

    function jumpup(){
    document.getElementById("ball").style.top= parseInt(document.getElementById("ball").style.top, 10) + parseInt(10,10) +"px"; 
}
    function jumpdown(){
    document.getElementById("ball").style.top= parseInt(document.getElementById("ball").style.top, 10) + parseInt(-10,10) +"px"; 
}

    var jumpingup = window.setInterval(function(){jumpup() }, 20);
    var jumpingdown = window.setInterval(function(){jumpdown() }, 20);

    function jump(){
    jumpingup;
    setTimeout(clearInterval(jumpingup),40);
    jumpingdown;
    setTimeou(clearInterval(jumpingdown),40);
    }

我做了一些改变，但我仍然无法做到我想要的

https://jsbin.com/docixofexi/edit?html

Answer 1

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <title>circle</title>
  <style>
    .circle {
      width: 32px;
      height: 32px;
      border-radius: 32px;
      background: darkred
    }
  </style>
</head>

<body>

  <div class="circle" id="ball" style="position:relative; left: 20px; top: 400px;"></div>
  <input type="text" onkeypress="pressFunction(event)">
  <p id="demo"></p>

  <script>
    function pressFunction(event) {
      var x = event.which;

      if (parseInt(x, 10) == 119) {
        jump();
      }
    }
    var jumpingdown = window.setInterval(function() {
      jumpdown()
    }, 50);
    clearInterval(jumpingdown);

    function jumpup() {
      document.getElementById("demo").innerHTML = "hey"
      document.getElementById("ball").style.top = parseInt(document.getElementById("ball").style.top, 10) + parseInt(-20, 10) + "px";
    }

    function jumpdown() {
      document.getElementById("ball").style.top = parseInt(document.getElementById("ball").style.top, 10) + parseInt(10, 10) + "px";
      document.getElementById("demo").innerHTML = "no"
    }

    function jump() {
      var jumpingup = window.setInterval(function() {
        jumpup()
      }, 30);
      setTimeout(function() {
        clearInterval(jumpingup)
      }, 230);
      var jumpingdown = window.setInterval(function() {
        jumpdown()
      }, 30);
      setTimeout(function() {
        clearInterval(jumpingdown)
      }, 460);
    }
  </script>
</body>

</html>

＆＃13;

我制作了提升球的跳投功能
我制作跳跃功能，将转回球位置
然后我使用window.setInterval(function())
然后我设置和计时器以clearInterval()

setTimeout

所以我得到了一个以0.46秒结束的循环

JS如何打破循环

1 个答案: