Bootstrap进度条计时器

Question

首先,您好,我正在使用Angular.js,Bootstrap,HTML和JavaScript(显示这些2).

所以,我的APP中有以下引导进度条:

<div class="progress">
    <div id="theBar" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
        60%
    </div>
</div>

现在,我希望它从100%减少到0%(每个百分比为1秒),重点是从它做出一个计时器,在它达到零之后,用户不能再执行指定的行动.我真的不知道怎么做,或者甚至可以使用bootstraps进度条,谢谢你提前和最好的问候.

Answer 1

这是一个例子:

// Code goes here
var i = 100;

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

}, 1000);

// Code goes here
var i = 100;

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

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
<h2>Hello window.setInterval!</h2>
    
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
    <span class="sr-only"></span>
  </div>
</div>

没有AngularJS参与此演示.