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参与此演示。

Answer 2

shershen使用JavaScript等

document.getElementById("theBar").style.width = "80%";
document.getElementById("theBar").innerHTML = "80%";

你的酒吧将增加到80％。

您可以使用此方法构建一个函数，每秒增加1％。

更新解决方案

<script>
var i = 100;

var counterBack = setInterval(function(){
i--;
if(i>0){
    document.getElementById("theBar").style.width = i+1+"%";
    document.getElementById("theBar").innerHTML = i+1+"%";
} else {
   clearTimeout(counterBack);
}

}, 1000);
</script>

循环的代码是从shershen的答案中借来的。

Answer 3

这个解决方案需要ui-bootstrap，并且计时器可以使用秒：

HTML：

<uib-progressbar class="progress-striped active" animate="true" value="timer" max="max" type="danger"></uib-progressbar>

Angularjs：

var app = angular.module('demoApp', ['ui.bootstrap']).controller('demoCtrl', function ($scope, $interval) {
$scope.timer = 15;
$scope.max = 15;

var countDown = $interval(function () {
    $scope.timer--;
    if ($scope.timer <= 0) {
        $interval.cancel(countDown);
        //TO DO
    }        
}, 1000);});