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

如何让我的进度条持续20秒？

1 个答案: