Question

我有一个HTML5进度条，起始值为100.单击该按钮时，其值将在15秒内减少为0。我修改了互联网上的示例代码。它现在在JSFiddle。它现在显示进度条的百分比，但我希望它显示完成加载之前的剩余时间。我怎么能这样做？

JS

$('#btnUpload').click(function() {
var time = 150; //15 secs
var bar = document.getElementById('progBar'),
    fallback = document.getElementById('downloadProgress'),
    loaded = 100;

var load = function() {
    loaded --;
    bar.value = loaded;

    /* The below will be visible if the progress tag is not supported */
    $(fallback).empty().append("HTML5 progress tag not supported: ");
    $('#progUpdate').empty().append(loaded + "% loaded");

    if (loaded <0) {
        clearInterval(beginLoad);
        $('#progUpdate').empty().append("Upload Complete");
        console.log('Load was performed.');
    }
};

var beginLoad = setInterval(function() {
    load();
}, time);

});

Answer 1

如果“它将在15秒内完成。”那么is it what you wanted？只需加上

var t = time-(time/100)*(100-loaded);
$('#progUpdate').empty().append(Math.round(t/10) + " sec left");

而不是

$('#progUpdate').empty().append(loaded + "% loaded");

Answer 2

您可以在％loading上附加秒数。

$('#btnUpload').click(function() {
    var time = 150; //15 secs
    var bar = document.getElementById('progBar'),
        fallback = document.getElementById('downloadProgress'),
        loaded = 100,
        totalTime = 15000;

    var load = function() {
        loaded --;
        totalTime -= time;
        bar.value = loaded;

        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: ");
        $('#progUpdate').empty().append(loaded + "% loaded. " + Math.ceil(totalTime/1000) + " seconds remaining");

        if (loaded <0) {
            clearInterval(beginLoad);
            $('#progUpdate').empty().append("Upload Complete");
            console.log('Load was performed.');
        }
    };

    var beginLoad = setInterval(function() {
        load();
    }, time);

});

如何显示进度条加载完毕之前的剩余时间？

2 个答案: