Question

作为标题，它的例子就像

Stacking Progress Bar

其中80％指的是绿色条，90％指的是较暗的灰色条..这只是一个例子，因为由于我的编码有些问题，我无法在右侧显示90％吧，因此我只是在Paint上编辑它..

目前我正在使用以下代码来实现此栏

HTML：

<div id='progBar'>
    <div>
        <div>
        </div>
    </div>
</div>

JS：进展：

function (percent, current,  $element) {
    var progressBarWidth = percent * $element.width() / 100;
    var currentBarWidth = current * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 2000);
    $element.find('div div').animate({ width: currentBarWidth }, 2000);
}

CSS：

#progBar {
    width: 275px;
    height: 20px;
    border: 1px solid #BDBDBD;
    background-color: #F2F2F2;
    margin: 2px 0 0 4px;
    line-height: 13px;
    font-size: 10px;
    text-align: right;
    color: #000;
}

#progBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 25px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #D8D8D8;
}

#progBar div div {
    height: 40%;
    border: 1px solid #BDBDBD;
    background-color: #b4d134;
    margin-top: 6px;
    line-height: 13px;
    font-size: 10px;
    text-align: left;
    color: #000;
}

id为Progbar的第一个div栏是整个进度条，第二个＆lt; DIV＆GT;＆LT; / DIV＆GT;块指的是第一进度条（深灰色），第三进度条（暗灰色）和第三进度条。 DIV＆GT;＆LT; / DIV＆GT; block是指绿色栏。

到目前为止，我发现代码对我有用，但问题在于，当我试图在进度条的右端显示百分比（90％）时，它就不会显示。我几乎可以猜到这是由于我的HTML编码，我在一行中堆叠了几个div块，其中显示符遵循div块的顺序..

所以我想问一下是否有其他方法可以像上面那样显示我的进度条？我不想并排排列2个不同的进度条，我希望它与上面显示的图像完全相同。

修改实际问题是当我尝试执行下面的两行代码时

$element.find('div').animate({ width: progressBarWidth }, 2000).html(target + "%&nbsp;");
$element.find('div div').animate({ width: currentBarWidth }, 2000).html(current + "%&nbsp;");

它显示左侧的当前百分比，但不显示右侧的目标百分比。

Answer 1

<强>更新

好的，我已编辑了代码：http://jsfiddle.net/QtBlueWaffle/Aftyj/8/

现在代码如下：

var easing = "linear"; //easeOutBounce

function progress(percent, current, $element, duration) {

    var $ref = $('#progressBar1');
    var progressBarWidth = percent * $element.width() / 100;
    if ($element.is($ref)) {
        $element.find('div').animate({
            width: progressBarWidth
        }, duration, easing);
    } else {
        $element.find('div').animate({
            width: progressBarWidth
        }, duration, easing).html(percent + "%&nbsp;");
    }
}


// Testers
// Tester 1
var currentPercentage1 = 0;
var currentPercentage2 = 0;
setInterval(function () {
    if (currentPercentage1 < 100) {
        currentPercentage1 = currentPercentage1 + 10;
        progress(currentPercentage1, 0, $('#progressBar1'), 500);
        $('#overlayPercentage').html(currentPercentage1 + "%&nbsp;")
    } else {
        $('#progressBar1').find('div').css({
            width: 0
        });
        currentPercentage1 = 0;
    }
}, 1000);


// Tester 2
setInterval(function () {
    if (currentPercentage2 < 100) {
        currentPercentage2 = currentPercentage2 + 5;
        progress(currentPercentage2, 0, $('#progressBar2'), 100);

    } else {
        $('#progressBar2').find('div').css({
            width: 0
        }).html("&nbsp;");
        currentPercentage2 = 0;
    }
}, 200);

样式表：

#progressTable {
    width:400px;
}
#progressBar1 {
    height:44px;
    border: 1px solid #111;
    background-color: #292929;
}
#progressBar2 {
    position:relative;
    top:-58px;
    height: 22px;
    border: 1px solid #111;
    background-color:rgba(0, 0, 0, 0);
}
.progressBar div {
    height: 100%;
    color: #fff;
    line-height: 22px;
    width: 0;
    text-align: right;
}
#overlayPercentage {
    text-align: right;
    border: 1px solid #f11;
    position:relative;
    top:-35px;
    color: #fff;
}

希望这有帮助。

在一个栏中堆叠2个或更多进度条

1 个答案: