Javascript的setInterval（）只運行一次函數

Question

我有這個代碼，我試圖讓其中一個div動畫。 div應該向下移動，然後降低20％後應該開始向上移動，然後再向下移動，等等。

問題是，看起來，代碼只運行一次。這意味着div只下跌2％，然後停留在那個位置。

的Javascript

var head = document.getElementById('char_furuta_head'); 
function anime() { 
    var direction = 1; /* 1 = down, -1 = up */ 
    setInterval(frame, 1000); 
    function frame() { 
     str = head.style.top; 
     str = substring(0,str.length); 
     var lel = parseInt(str); 
     console.log(lel); 

     if (direction == 1) { 
      lel += 2; 
      head.style.top = lel + '%'; 
      if(lel == 20) { direction = -1; }; 
     } else { 
      lel -= 2; 
      head.style.top = lel + '%'; 
      if(lel == 0) { direction = 1; }; 
     } 
    } 
} 

Answer 1

你誤診的問題。

間隔運行良好。

您需要正確調試它。 Add console.log statements to see when functions are called and what the values of your variables are：

var lel = head.style.top; 
    lel += 2; 
    head.style.top = lel + '%'; 

第一次調用：

1. lel是一個空字符串
2. lel是2
3. head.style.top是2%

第二時間：

1. lel是2%
2. lel是2%2
3. head.style.top是2%因爲2%2無效

第三次重複第二次。

使用parseInt從長度中提取數字。

Answer 2

它每次都會運行，但問題是每次迭代都會聲明相同的內容。

在您的if聲明之外移動var lel = head.style.top;。

var head = document.getElementById('char_furuta_head'); 

    function anime() { 
     var direction = 1; 
     setInterval(frame, 1000); 

     function frame() { 
      // you need first to check here what units are you using in your css, so you can propely clean/parse the value and convert it to a number. I will consider it to be percentages. 
      var lel = parseInt(head.style.top.replace('%','')); 

      if (direction == 1) {  
        lel += 2; 
        head.style.top = lel + '%'; 
        if(lel == 20) { 
         direction = -1; 
        }; 
      } else { 
        lel -= 2; 
        head.style.top = lel + '%'; 
        if(lel == 0) { 
         direction = 1; 
        }; 
      } 
     } 
    } 

    anime(); 

Answer 3

您的代碼有以下問題：

1）功能動畫（）沒有右括號「}」

2）的時間間隔爲1秒 - 不知道你是否真的每秒想移動DIV 2％？

3.）您不能將「2％」+「2％」等百分比加起來。您需要將該字符串轉換爲整數。你可以爲此使用parseInt。