Question

我正试图在我的HTML女巫中显示一个进度条。

我希望它在10（0,10,20,30,40，...）之前进展到100％，我想重定向到另一页。

这是我的JS：

for (x=0; x<= 100; x+10) {
    window.setInterval(function(){
        if($('.loading-progress').css('width') != '100%') {
                $('.loading-progress').css("width", x+"%");
        }
    }, 2000);
}

我不明白为什么我的代码不起作用。

请帮助。

感谢。

Answer 1

以常规方式计算x并且..

 $('.loading-progress').css("width", Math.floor(x / 10) * 10 + "%");

ps：相信我，你不需要 10个setInterval计时器一直在运行。我正在谈论下面的代码。它准备10个计时器，每个计时器每2秒执行一次，直到页面重新加载或更改为止。

for (x=0; x<= 100; x+10) {
    window.setInterval(function(){

可能需要setTimeout，但不是setInterval

另一种方法是在

下面

＆＃13;

function update_counter(progress) {
 if (progress <= 100) {
     document.getElementById('bar').style.width = progress + "%";
     setTimeout(function() {update_counter(progress + 10); }, 2000);
 } else {
     alert('Redirect');
 }
}

update_counter(0);

＆＃13;

.loading-progress {
    background-color: red;
    height: 20px;
    width: 0%;
}

＆＃13;

<div class='loading-progress' id='bar'></div>

＆＃13;

按步数10％显示进度条

1 个答案: