Javascript 如何让进度条持续20秒？

我需要我的进度条持续20秒。 当它完成工具栏时，它仍然需要能够刷新，就像现在一样。 我需要能够在我的代码中输入精确的秒数。 这是我的密码：

<div id="pbar_outerdiv">
<div id="pbar_innerdiv"></div>
<!--<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;"></div>-->
</div>

<script>
var timer = 0,
    perc = 0,
    timeTotal = 2500,
    timeCount = 1,
    cFlag;



function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);

            if(y === "100.000")
    window.location.reload(1);
    $('#pbar_innerdiv').css("width", x + "%");
    //$('#pbar_innertext').text(y + "%");
}

function animateUpdate() {
    if(perc < timeTotal) {
        perc++;
        updateProgress(perc);
        timer = setTimeout(animateUpdate, timeCount);
    }
}
$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        if (cFlag == undefined) {
            clearTimeout(timer);
            perc = 0;
            cFlag = true;
            animateUpdate();
        }
        else if (!cFlag) {
            cFlag = true;
            animateUpdate();
        }
        else {
            clearTimeout(timer);
            cFlag = false;
        }
    });
    $( "#pbar_outerdiv" ).trigger( "click" );
        });
</script>

var定时器=0，
perc=0，
总时间=2500，
时间计数=1，
cFlag；
函数updateProgress（百分比）{
变量x=（百分比/时间总数）*100，
y=x.t固定（3）；
如果（y==“100.000”）
窗口。位置。重新加载（1）；
$（'pbar_innerdiv'）.css（“宽度”，x+“%”）；
//$（'pbar_innertext'）。文本（y+“%”）；
}
函数animateUpdate（）{
如果（perc<时间总计）{
perc++；
更新进度（perc）；
计时器=设置超时（动画更新、时间计数）；
}
}
$（文档）.ready（函数（）{
$（'#pbar_outerdiv'）。单击（函数（）{
if（cFlag==未定义）{
清除超时（计时器）；
perc=0；
cFlag=真；
动画更新（）；
}
如果（！cFlag）{
cFlag=真；
动画更新（）；
}
否则{
清除超时（计时器）；
cFlag=假；
}
});
$（“#pbar_outerdiv”）。触发器（“单击”）；
});

您正在使用jQuery。不必重新发明轮子，您可以用以下工具完成您在那里尝试的一切：

var duration = 20 * 1000; // = 20 seconds

$(document).ready(function() {
    $outer = $("#pbar_outerdiv");

    $outer.click(function() {
        $('#pbar_innerdiv')
            .stop()
            .css({ width: 0 })
            .animate({ width: "100%" }, duration, "linear", function() { window.location.reload(1); });
    })

    $outer.trigger("click");
});

---

我认为您的timeCount变量应该是1000，也就是以毫秒为单位的1秒，因为setTimeout函数以毫秒为单位接收时间milliseconds@MarcosGonz不，那不行，试了很多次谢谢你，你在一分钟内做的，花了我大约4个小时-，-。