0

我有一个起始值为 100 的 HTML5 进度条。单击该按钮时，其值将在 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);

});
4

2 回答 2

1

如果“它将在 15 秒内准确完成”。那是你想要的吗？就放

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

反而

$('#progUpdate').empty().append(loaded + "% loaded");
于 2013-01-31T09:26:11.757 回答
1

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

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

});
于 2013-01-31T09:36:03.733 回答