Bootstrap 3 индикатор выполнения добавляет время счетчика в интервале - PullRequest
Новая
       5

Bootstrap 3 индикатор выполнения добавляет время счетчика в интервале

0 голосов
/ 29 февраля 2020

Я пытаюсь увеличить текущую ширину индикатора выполнения с счетчика 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

1 Ответ

0 голосов
/ 29 февраля 2020

Это может помочь увеличить текущую ширину индикатора выполнения от счетчика 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();
});
...