Bootstrap 3进度条在间隔中添加计数器时间答案

【问题标题】：Bootstrap 3 progress bar add counter time in IntervalBootstrap 3进度条在间隔中添加计数器时间
【发布时间】：2020-02-29 04:28:37
【问题描述】：

我正在尝试使用按钮从setInterval 计数器增加进度条当前宽度。

必须：每次单击按钮时，当前计数都会增加 2。

HTML：

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-danger"  role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
  </div>
</div>
<button type="button" class="btn btn-primary">
  Add Counter
</button>

Javascript：

function progress(){
    var count = 100;
    var counterBack = setInterval(function(){
        count--;
        if (count > 0){
            $('.progress-bar').css('width', count+'%');
        } else {
            clearInterval(counterBack);
        }

    }, 100);
}

progress();

JSFiddle

【问题讨论】：

标签： javascript progress-bar

【解决方案1】：

这可能有助于使用按钮从 setInterval 计数器增加进度条的当前宽度。

HTML：

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-danger"  role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%">
  </div>
</div>
<button type="button" class="btn btn-primary">
  Add Counter
</button>

JavaScript

$('.btn').click(function(){
    function progress(){
        var count = 0;
        var counter = setInterval(function(){
            count++;
            if (count < 100){
                $('.progress-bar').css('width', count+'%');
            } else {
                clearInterval(counter);
            }

        }, 100);
    }
        progress();
});

【讨论】：