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。