Javascript 仪表栏未更新_Javascript_Html

Javascript 仪表栏未更新

javascript html

Javascript 仪表栏未更新,javascript,html,Javascript,Html,代码如下： <!DOCTYPE html> <style> h1 { color: white; } body { background-color: black; } .scroller { background: linear-gradient(#94ff98, green); } &

代码如下：

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


h1{
颜色：白色；
}
身体{
背景色：黑色；
}
.卷轴{
背景：线性梯度（绿色）；
}
正在获取数据。。。
















设定间隔(
函数（）{
var prog=document.getElementById（“prog”）；
var i=0；
i=i+1；
程序设置属性（“值”，i）
},
10
);

是的，我知道meter元素不用于进度条，但我只是为了美观而使用它，实际上它什么都没有做。

那么为什么它不更新，setinterval只运行一次呢

应将

的变量声明移到

setInterval

回调之外。对于每个间隔，变量

重新初始化为零

此外，最好在

达到100后清除间隔

var i=0；
var interval=setInterval（函数（）{
var prog=document.getElementById（“prog”）；
i=i+1；
程序值=i；
控制台日志（i）；
如果（i>=100）{
间隔时间；
}
}, 10);
h1{
颜色：白色；
}
身体{
背景色：黑色；
}
.卷轴{
背景：线性梯度（绿色）；
}
正在获取数据。。。

您的代码是：每10毫秒

访问DOM

1声明一个变量，将其值赋给0

将1添加到i（0+1=1）

然后将DOM元素的值设置为i（例如1）

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

您需要将i移出匿名函数的范围

试试这段代码，它会帮你的

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


var i=0；
var interval=setInterval（函数（）{
var prog=document.getElementById（“prog”）；
i=i+1；
程序值=i；
控制台日志（i）；
如果（i>=100）{
间隔时间；
}
}, 35);