Question

我正试图让图像看起来像是摔倒了。所以我制作了一个div并将图像放入其中。使用setinterval和clearinterval我试图让图像停在div的边界但我不知道如何做到这一点。这是代码：

var x = 200;
var y = -155;
var inc = 5;

var myVar;

var fall = function() {
myVar = setInterval(function(){moveDown();},30);
};
var stopFall = function() {
clearInterval(myVar);
};
var moveDown = function() {
y += inc;

document.getElementById('img1').style.top = y + 'px';
};

我希望setinterval在y = 155时自动停止，但我不知道如何。我试过if，while和for statement但是它们似乎不起作用.. 我创建了一个运行stopFall();的按钮，它可以工作，但是我想让它在不点击任何按钮的情况下自动停止。有谁知道怎么做？

Answer 1

更改moveDown()功能以检查y的当前状态，如有必要，请致电stopFall()。

var moveDown = function() {
  y += inc;

  if ( y >= 155 ) { stopFall(); }

  document.getElementById('img1').style.top = y + 'px';
};

作为替代方案，您可以直接使用clearInterval()

var moveDown = function() {
  y += inc;

  if ( y >= 155 ) { 
    clearInterval(myVar);
  }

  document.getElementById('img1').style.top = y + 'px';
};

Answer 2

 var x = 200;
 var y = -155;
 var inc = 5;

 var myVar;

 var fall = function() {
       myVar = setInterval(function(){
         if(y >= 155) clearInterval(myVar);
         moveDown();
       },
       30);
 };

 var moveDown = function() {
     y += inc;

     document.getElementById('img1').style.top = y + 'px';
 };

Javascript setinterval和clearinterval

2 个答案: