Bootstrap进度条计时器

Question

首先，你好，我正在使用Angular.js、Bootstrap、HTML和JavaScript（显然这两个）。

那么，在我的应用程序中，我有以下的Bootstrap进度条：

<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进度条实现，提前感谢您的帮助，祝好。

- Fábio Santos

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。

- shershen

Answer 2

使用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的答案中借鉴来的。

- K.I

---

我可能稍微误读了信息，但是使用这种方法可以解决你的问题。 - K.I

我每次都得打那个，100次。而且还不知道如何每秒更改它，但是没关系，我们都会犯错误 ;) - Fábio Santos

好吧，我并没有说这是一个完整的解决方案:D 但如果你喜欢别人为你完成的东西，你可以使用另一个人建议的相同方法，所以用我的代码它会看起来像这样。请查看更新后的答案。 - K.I

嗯，我试图将两种解决方案结合起来，但遇到了问题，因为显然我无法在 getElementByID 上增加宽度，因为它是一个字符串。是的，我的代码是由另一个人完成的，但现在我永远拥有这个信息片段，每当我需要它时，我都可以使用它，并知道如何继续，无论是以原始状态实现它还是根据需要进行更改。 - Fábio Santos

看，这就是我心中的想法，基本上就是这个，但我不知道如何循环它。无论如何，我刚刚发现你给我的第一个答案太过广泛了，这就是我一开始抱怨的原因。 - Fábio Santos

没问题，很高兴你找到了解决方案! ;) - K.I

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);});   

- Santiago Sotelo Docío