没有更新

本仪表酒吧是代码：没有更新

<!DOCTYPE html> 
    <style> 
     h1 { 
      color: white; 
     } 
     body { 
      background-color: black; 
     } 
     .scroller { 
      background: linear-gradient(#94ff98, green); 
     } 
    </style> 
    <html lang="en"> 
     <head> 
      <meta charset="utf-8" /> 
      <title></title> 
     </head> 
     <body> 
      <h1 align="center">Fetching data...</h1> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <meter id="prog" value="0" max="100" style="width: 100%"></meter> 
      <script> 
       setInterval(
       function() { 
        var prog = document.getElementById("prog"); 
        var i = 0; 
        i = i + 1; 
        prog.setAttribute("value", i) 
       }, 
       10 
       ); 
    </script> 
     </body> 
    </html>

是的，我知道电表的元素不是进度条，但我只是用它只是为了美观，它没有做任何事情，真的。那么为什么它不更新，setinterval只运行一次？

来源

2015-09-16 php.exe

i的变量声明应该移到setInterval回调之外。变量i在每个时间间隔内重新初始化为零。

而且，最好是清除间隔i已经达到100

Demo

var i = 0; 
 
var interval = setInterval(function() { 
 
    var prog = document.getElementById("prog"); 
 

 
    i = i + 1; 
 
    prog.value = i; 
 
    console.log(i); 
 
    if (i >= 100) { 
 
    clearInterval(interval); 
 
    } 
 
}, 10);

h1 { 
 
    color: white; 
 
} 
 
body { 
 
    background-color: black; 
 
} 
 
.scroller { 
 
    background: linear-gradient(#94ff98, green); 
 
}

<h1 align="center">Fetching data...</h1> 
 

 
<br> 
 
<br> 
 
<meter id="prog" value="10" max="100" style="width: 100%"></meter>

来源

2015-09-16 04:58:11 Tushar

后

你的代码是说：每10毫秒，

访问th ëDOM，
1声明变量，分配给它的值设置为0，
添加1到i（0 + 1 = 1）
那么你的DOM元素的值设置为I（例如1）

问题是，您的代码不断创建一个新的本地作用域变量i，并在每次调用该函数时将其设置为零。

您需要将我移到匿名函数的范围之外。

来源

2015-09-16 05:01:56

试试这个代码，它会帮助你

<script> 
     var i = 0; 
     var interval = setInterval(function() { 
      var prog = document.getElementById("prog"); 

      i = i + 1; 
      prog.value = i; 
      console.log(i); 
      if (i >= 100) { 
       clearInterval(interval); 
      } 
     }, 35); 
    </script>

来源

2015-09-16 05:05:40

回答

相关问题