[英]Bootstrap progress bar timer
首先,您好,我正在使用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進度條,謝謝你提前和最好的問候。
這是一個例子:
// 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使用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的答案中借來的。
這個解決方案需要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);});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.