沒有更新

本儀表酒吧是代碼：沒有更新

<!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

回答

相關問題