Прогрессбар в Jquery-UI - Javascript - PullRequest
Новая
       3

Прогрессбар в Jquery-UI - Javascript

0 голосов
/ 22 ноября 2011

Я пытаюсь обновить индикатор выполнения на основе одной из двух переменных:

  • Начать полосу с 'x' procent
  • 'x' Минуты до 100%

(http://jqueryui.com/demos/progressbar/)

Пока у меня есть это: 

<script>
$(function() {
    var pGress = setInterval(function() {
        var pVal = $('#progressbar').progressbar('option', 'value');
        var pCnt = !isNaN(pVal) ? (pVal + 1) : <?php echo $procent_finished; ?>;
        if (pCnt > 100) {
            clearInterval(pGress);
        } else {
            $('#progressbar').progressbar({value: pCnt});
            $('#progressbar1').progressbar({value: pCnt});
        }
    },<?php echo $remaining_minutes; ?>);
});
</script>

«$ procent_finished» - это% уже выполнено, а «$ Остаток_минут» должнооставшиеся минуты до 100%.

Пример:

Я хочу, чтобы бар начинался с 60%, а 1 минута достигала 100%.

  • procent_finished = 60
  • Остаток_минут = 600 (10 минут = 1 * 6 * 10, если я прав ..)

Но когда я запускаю файл с этими переменнымион действительно начинается на 60%, но он уже завершен до 100% через 25 секунд.(хотя это должно быть выполнено только до 100% через 1 минуту)

Я пытался и искал несколько формул, чтобы получить правильное оставшееся время, но я действительно не могу понять это.Надеюсь, найдется кто-нибудь, кто может мне помочь, потому что я больше не имею понятия.

Заранее спасибо!

edit: было бы еще лучше, если бы он обновлял индикатор прогресса каждую минуту и ​​простодобавляет сумму%.

1 Ответ

1 голос
/ 22 ноября 2011

setInterval нужен интервал в миллисекундах, вы устанавливаете интервал 600, который составляет 0,6 секунды.1 минута будет 60000.

Таким образом, чтобы функция обновляла бары каждую минуту, вы должны сделать это, 

$(function() {
var percentDone = <?php echo $procent_finished; ?>;
var minute = 0;
var percentIntervals = (100 - percentDone )/<?php echo $remaining_minutes; ?>;

$('#progressbar').progressbar({value: percentDone});

var pGress = setInterval(function() {
    var nVal = (percentIntervals) * (++minute) + percentDone;
    if (nVal > 100) {
        clearInterval(pGress);
    } else {
        $('#progressbar, #progressbar1').progressbar({value: nVal});
    }
}, 60000);
});

, где remaining_minutes - целое число, представляющее, сколько осталось минут.

http://jsfiddle.net/q4WqL/

...