Jquery-UI 中的进度条 - Javascript

Question

我正在尝试基于两个变量更新进度条：

• 从 '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" 是已经完成的 %，"$remaining_minutes" 应该是到 100% 的剩余分钟数。

示例：

我希望条形图从 60% 开始，并在 1 分钟后达到 100%。

• procent_finished = 60
• remaining_minutes = 600（如果我是对的，10 分钟 = 1*6*10..）

但是当我使用这些变量运行文件时，它确实以 60% 开始，但在 25 秒后它已经完成到 100%。 （虽然它应该只在 1 分钟后完成到 100%）

我已经尝试并搜索了几个公式以获得正确的剩余时间，但我似乎真的无法弄清楚。希望有人可以帮助我，因为我已经不知道了。

提前致谢！

编辑：如果它每分钟更新一次进度条会更好，它只会增加 %.

Answer 1

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/