jQuery进度计时器栏 [英] jQuery progress timer bar

问题描述

我在jQuery中有一个进度计时器栏 - 这是一个例子 http://jsfiddle.net/6h74c/

I have a progress timer bar in jQuery - here is an example http://jsfiddle.net/6h74c/

如果我有时间值（以毫秒为单位）（600000 = 10分钟，300000 = 5分钟等），我怎样才能使该时间段内的条形增量时间？

If I have time values in milliseconds, (600000 = 10 minutes, 300000 = 5 minutes, etc), how can I make the bar increment for that period of time?

在jsfiddle链接中，我正在尝试将进度条设置为增加835000ms。

In the jsfiddle link, I'm trying to set the progress bar to increase for 835000ms.

然而，setTimeout（）决定了条形图增加的频率，它也是基于宽度百分比，这似乎不准确 - 我应该做什么这有什么不同？

However, the setTimeout() determines how often the bar will increase and it is also basing it off of width percentage, which doesn't seem accurate - should I be doing this differently?

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%"); // probably not ideal
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    perc++;
    updateProgress(perc);
    if(perc < 835000) {
        timer = setTimeout(animateUpdate, 50); // probably not ideal either?
    }
}

推荐答案

< a href =http://jsfiddle.net/6h74c/3/ =nofollow noreferrer>小提琴示例

我会做类似的事情：

var start = new Date();
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*100);

    if (perc <= 100) {
        updateProgress(perc);
        setTimeout(animateUpdate, timeoutVal);
    }
}

这篇关于jQuery进度计时器栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！