如何显示进度条加载完成所剩的时间？答案

【问题标题】：How can I show the time left until progress bar is finished loading?如何显示进度条加载完成所剩的时间？
【发布时间】：2013-01-31 06:53:11
【问题描述】：

我有一个 HTML5 进度条，起始值为 100。当点击按钮时，它的值会在 15 秒内减为 0。我已经从互联网上找到的示例中修改了代码。它现在位于JSFiddle。它现在显示进度条的百分比，但我希望它显示完成加载之前的剩余时间。我该怎么做？

$('#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);

});

【问题讨论】：

如果事先不知道操作将花费的总时间，则您无法显示剩余时间，除非您根据到目前为止已完成多少时间不断猜测总时间，这是什么大多数上传者都会这样做。
对不起。它将在 15 秒内准确完成。它仅用于显示。它与上传无关，它只是旧示例中的标签。

标签： jquery html progress-bar

【解决方案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");

【讨论】：

【解决方案2】：

您可以将秒数附加到您的加载百分比。

$('#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);

});

【讨论】：