javascript - 如何让进度条持续 20 秒？

Question

我需要进度条持续 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>

Answer 1

您正在使用 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");
});

Working demo