引导进度条计时器答案

【问题标题】：Bootstrap progress bar timer引导进度条计时器
【发布时间】：2015-05-07 14:38:30
【问题描述】：

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

所以，我的 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 秒），关键是用它做一个计时器，在它达到零后，用户不能再执行指定的动作。我真的不知道该怎么做，或者是否可以使用引导进度条，提前谢谢你和最好的问候。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap-3 progress-bar

【解决方案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。

【讨论】：

【解决方案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>

for loop 的代码是从 sheshen 的回答中借来的。

【讨论】：

我可能稍微误读了这条消息，但是是的，您的问题可以使用这种方法解决。
我必须每次都输入，100 次。而且仍然不知道如何每秒更改它，但是，它是 k，我们都会犯错误 ;)
好吧，我并没有说这是一个完整的解决方案 :D 但是如果您喜欢其他人为您完成的工作，您可以使用与其他人建议的相同的方法，所以使用我的代码它看起来像这样.查看更新的答案。
好吧，我试图结合这两种解决方案，但遇到了问题，因为显然我不能增加 getElementByID 的宽度，因为它是一个字符串。是的，我的代码是由另一个人完成的，但现在我永远得到了这条信息，每当我需要它时，我都会随身携带它，并且知道如何继续，或者以原始状态实现它或根据需要进行更改。
看，这就是我的想法，差不多就是这个，但不知道如何循环它。不管怎样，我发现你给我的第一个答案太笼统了，这就是我一开始抱怨的原因。

【解决方案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);});

【讨论】：