javascript Bootstrap 进度条计时器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30104289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap progress bar timer
提问by Fábio Santos
First of, hello, I am using Angular.js, Bootstrap, HTML, and JavaScript (obv these 2).
首先，你好，我正在使用 Angular.js、Bootstrap、HTML 和 JavaScript（注意这两个）。
So, I have the following bootstrap progress bar in my APP:
因此，我的 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>
Now, I'd like it to decrease from 100% to 0% ( each percentage being 1 second), the point would be to make a timer out of it, in which after it reaches zero, the user can no longer perform a specified action. I really have no clue how to do is, or if it is even possible using bootstraps progress bar, Thank you in advance and best regards.
现在，我希望它从 100% 减少到 0%（每个百分比为 1 秒），重点是制作一个计时器，在它达到零后，用户不能再执行指定的行动。我真的不知道该怎么做，或者甚至可以使用引导程序进度条，提前致谢并致以最诚挚的问候。
回答by shershen
Here is an example:
下面是一个例子：
// 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>No AngularJS involved in this demo.
此演示中不涉及 AngularJS。
回答by K.I
shershenUse JavaScript such as
shershen 使用 JavaScript 之类的
document.getElementById("theBar").style.width = "80%";
document.getElementById("theBar").innerHTML = "80%";
And your bar will increase to 80%.
你的酒吧将增加到 80%。
You can build a function using this approach to increase by 1% every second.
您可以使用这种方法构建一个函数，每秒增加 1%。
Updated solution
更新的解决方案
<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>
The code for loop was borrowed from shershen's answer.
循环的代码是从谢尔申的回答中借来的。
回答by Santiago Sotelo Docío
This solution needs ui-bootstrap, and the timer works with seconds:
此解决方案需要 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);});
