0

開始値が 100 の HTML5 プログレス バーが 1 つあります。ボタンをクリックすると、その値は 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

ロードされた % に秒数を追加できます。

$('#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 に答える
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 に答える