如何将进度条百分比限制为仅100%

Question

我的问题是,当我尝试运行它并尝试更改浏览器中的选项卡并再次返回时,百分比不仅仅是100%最终结果.但是,如果我在进度运行时不更改选项卡,那么它的工作非常完美.

HTML

<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
 .container {
    margin-top: 30px;
    width: 400px;
}

使用Javascript

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 40);
    }
    $bar.text($bar.width() / 4 + "%");
}, 800);

小提琴:http://jsfiddle.net/5w5ku/1/

Answer 1

只是设置为限制,这将工作:

替换此行:

$bar.text($bar.width() / 4 + "%");

这一行:

$bar.text(Math.min($bar.width() / 4,100)+"%");