Bootstrap barre de progression de la minuterie

D'abord, bonjour, je suis en utilisant Angular.js, Bootstrap, HTML et JavaScript (obv ces 2).

Donc, j'ai de la suite de "bootstrap" de la barre de progression dans mon APPLICATION:

<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>

Maintenant, j'aimerais qu'il baisse à partir de 100% à 0% ( à chaque pourcentage de 1 seconde), le point serait de faire un timer, qui, après qu'il atteint zéro, l'utilisateur ne peut plus effectuer une action spécifique. Je n'ai vraiment aucune idée de comment faire, ou si c'est même possible en utilisant l'amorce de la barre de progression, je vous Remercie à l'avance et meilleures salutations.

OriginalL'auteur Fábio Santos | 2015-05-07

  1. 1

    shershenUse JavaScript comme 

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

    Et votre barre d'augmenter à 80%.

    Vous pouvez construire une fonction à l'aide de cette approche pour augmenter de 1% à chaque seconde.

    Mise à jour de la 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>

    Le code de la boucle a été emprunté à shershen de réponse.

    Êtes-vous sérieux?
    J'ai probablement mal lu le message un peu, mais oui, votre problème peut être résolu à l'aide de cette approche.
    J'aurais du type qui à chaque fois, 100 fois. Et encore n'ont aucune idée de comment le changer à chaque seconde, MAIS, c'est k, nous faisons tous des erreurs 😉
    J'ai bien fait de ne pas dire que c'est une solution complète 😀 Mais si vous aimez les trucs fait pour vous par d'autres, vous pouvez utiliser la même approche que les autres gars ont suggéré, donc, avec mon code, il va ressembler à ceci. Voir mise à jour de réponse.
    Eh bien, j'ai essayé de combiner les deux solutions, mais a des problèmes, parce qu'évidemment je ne peux pas incrémenter la largeur sur getElementByID puisque c'est une chaîne de caractères. Et oui, j'ai obtenu mon code fait par une autre personne, mais maintenant j'ai ce morceau de l'info avec moi pour toujours, et à chaque fois que j'en ai besoin, je l'ai avec moi, et de savoir comment procéder, soit à le mettre en œuvre dans son état brut ou de faire des changements que j'en ai besoin.

    OriginalL'auteur K.I

  2. 0

    Cette solution doit ui-bootstrap, et le timer fonctionne avec les secondes:

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

    OriginalL'auteur Santiago Sotelo Docío