Question

这是代码：

<!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只运行一次？

Answer 1

setInterval的变量声明应移到i回调之外。对于每个间隔，变量i将重新初始化为零。

此外，最好在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);达到100之后清除间隔。

Demo

＆＃13;

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

＆＃13;

<h1 align="center">Fetching data...</h1>

<br>
<br>
<meter id="prog" value="10" max="100" style="width: 100%"></meter>

＆＃13;

<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">

<xsl:output method="html" encoding="utf-8" indent="yes" />
<xsl:strip-space elements="*" />

<xsl:template match="/">
<html>
  <head>
    <title>Restaurants</title>
  </head>
  <body>
    <h1>Recommended Restaurant</h1>
    <p>
      In Chicago, I recommend <xsl:value-of select="
        Restaurants/Restaurant[Location/City='Chicago'][1]/@Name" />
      <!-- Assume that restaurants are sorted by recommendation. -->
    </p>
    <h1>Restaurants by location</h1>
    <table border="1">
      <tr>
        <th>Restaurant Name</th>
        <th>City</th>
        <th>State</th>
        <th>Quality</th>
        <th>Price</th>
      </tr>
      <xsl:apply-templates select="Restaurants/Restaurant">
        <xsl:sort select="Location/State" />
      </xsl:apply-templates>
    </table>

    <!--Restaurants that serve vegetarian-->
    <h1>Restaurants with Vegetarian Choices</h1>
    <table border="1">
      <tr>
        <th>Restaurant Name</th>
        <th>Menu item</th>
        <th>Price</th>
        <th>Calories</th>
      </tr>
      <xsl:apply-templates select="Restaurants/Restaurant/Menu/MenuItem[@IsVegetarian='true']">
        <xsl:sort select="Location/State" />
        <xsl:sort select="@Name" />
        <xsl:sort select="text()" />        
      </xsl:apply-templates>
    </table>
  </body>
</html>
</xsl:template>

<xsl:template match="Restaurant">
  <tr>
    <td><xsl:value-of select="@Name" /></td>
    <td><xsl:value-of select="Location/City" /></td>
    <td><xsl:value-of select="Location/State" /></td>
    <td><xsl:value-of select="@QualityRating" /></td>
    <td><xsl:value-of select="@PriceRating" /></td>
  </tr>
</xsl:template>

<xsl:template match="MenuItem">
  <tr>
    <td><xsl:value-of select="../../@Name" /></td>
    <td><xsl:value-of select="." /></td>
    <td><xsl:value-of select="@Price" /></td>
    <td><xsl:value-of select="@Calories" /></td>
  </tr>
</xsl:template>

</xsl:stylesheet>

＆＃13;

Answer 2

试试这段代码它会帮助你

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

Answer 3

你的代码说：每10毫秒，

访问DOM，
1声明一个变量，将其值赋值为0，
将i加1（0 + 1 = 1）
然后将DOM元素的值设置为i（例如1）

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

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

仪表栏没有更新

3 个答案: