Wie Inkrementieren eines bootstrap-Fortschrittsbalken?

Ich habe gerade angefangen mit .php/Java, kann mir jemand zeigen, wie man meine bootstrap-Fortschritt-bar zu erhöhen, in übereinstimmung mit einer vom Benutzer eingestellten Zeit.

Fortschrittsbalken:

Code:

<div class="progress progress-striped active">

<div id="progressbar" class="bar" style="width: 0%;"></div>

Benutzer-Eingabe Beispiel:
Code:

Sekunden Einstellen:

<input type="text" id="speed" value="10" /> 

<input type="submit" value="Start" onclick="doProgress();" />

Java-Script {erforderlich}:

Code:

 <script type="text/javascript">
 function doProgress()

 { 

 Idk :( Please help.

 };
 </script>

(style="width: 0%;") Ist der Fortschrittsbalken, der Wert 100% als maximum.

Möchte ich den Wert zu erhöhen, in übereinstimmung mit den Nutzern eingestellten Wert in Sekunden mit diesem element habe ich zur Verfügung:

<input type="text" id="speed" value="10" />

Beispiel: der Benutzer gibt 30 ich will es bis zu 30 Sekunden für die Fortschrittsanzeige 100% zu erreichen

Alles, was Sie tun müssen ist, legen Sie die Breite der Balken.
Auch Java != Javascript.
ändern Sie die CSS - width Anwesen von #progressbar +1 bis 100 eine einfache Schleife wird es tun

InformationsquelleAutor Koala | 2012-08-31

3

So etwas (ungetestet):
```
function doIncrement(increment) {
  w = parseInt(document.getElementById('progressBar').style.width);
  document.getElementById('progressBar').style.width= (w + increment) +'%';
}

var w
var speed = document.getElementById('speed').value;
var increment = (speed/100);
for(var x = 0; x<speed; x++)
{
  setTimeout(doIncrement(increment),1000);
}
```
Sie wollen es erhöhen sich langsam über die Zeit? oder Sie wollen es einfach nur so lange warten, nachdem Sie klicken Sie auf es, um es zu 100%?
Im Laufe der Zeit erhöhen zum Beispiel stellt der Anwender 30 Sekunden, die ich wollen, dass der Fortschrittsbalken sich zu bewegen, zu 100% über den 30seconds nicht nur sofort zu 100%
Wie das? Aktualisiert meine Antwort.

InformationsquelleAutor Steve Valliere

Den setTimeout Ansatz (wie in den anderen Antworten) ist der am häufigsten verwendete Ansatz für die Animation zeitbasierter Fortschritt.

Aber ich habe ein problem mit setTimeout wenn die Geschwindigkeit ist schnell oder wenn ich es zurücksetzen möchten, müssen Sie den regler von 100% auf 0%, als Standard-Bootstrap-css-übergänge führen zu unerwünschten animation und Effekte (ich.e dauert 0,6 Sekunden zurück auf 0%). Also ich schlage vor, optimieren den übergang styling entsprechend die gewünschte animation Effekt e.g

pb = $('[role="progressbar"]')
//immediate reset to 0 without animation
pb.css('transition', 'none');
pb.css('width', '0%');
//now animate to 100% with setTimeout and smoothing transitions
pb.css('transition', 'width 0.3s ease 0s');
var counter = 0;
var update_progress = function() {
  setTimeout(function() {
    pb.attr('aria-valuenow', counter);
    pb.css('width', counter + '%');
    pb.text(counter + '%');
    if(counter<100) {
      counter++;
      update_progress();
    }
  }, 5 * 1000 / 100); //5 seconds for 100 steps
};
update_progress();

Aber wenn du in der jQuery-camp, dann jQuery.animieren ist, ich denke, ein genauerer Ansatz, wie Sie können vergessen, um Durcheinander mit css-übergang styling und zählen Schritte etc z.B.

pb = $('[role="progressbar"]')
pb.css('transition', 'none'); //if not already done in your css
pb.animate({
  width: "100%"
}, {
  duration: 5 * 1000, //5 seconds
  easing: 'linear',
  step: function( now, fx ) {
    var current_percent = Math.round(now);
    pb.attr('aria-valuenow', current_percent);
    pb.text(current_percent+ '%');
  },
  complete: function() {
    //do something when the animation is complete if you want
  }
});

Habe ich ein demo-und mehr Diskussion auf GitHub hier.

Dies sollte akzeptiert wurden, beantworten

InformationsquelleAutor tardate

1

Ich bin nur zu lernen, bootstrap mich und kam mit dieser für die Weiterentwicklung der it. Wie bereits in anderen Antworten, die Breite CSS-Eigenschaft zu sein scheint, was die animation ausgelöst wird, aber ursprünglich habe ich es nicht bemerkt, und legen Sie die zugehörigen aria-Attribut. Sie wahrscheinlich wollen um sicherzustellen das setzen der width-Ergebnisse in andere Verwandte Attribute immer richtig aktualisiert, wenn a11y für Sie wichtig ist, die Einstellung, die Sie als notwendig, wenn nicht.
```
$( function() {
  var bar = $('div.progress-bar');
  var val = null;

  i1 = setInterval(function() {
    val = parseInt(bar.attr('aria-valuenow'));
    val += 10;
    console.log(val);
    if( val < 101) {
      bar.attr('aria-valuenow', val);
      bar.css('width', val + '%');
    } else {
      clearInterval(i1);
    }
  }, 1000);

});
```
InformationsquelleAutor Kyle
0

Versuchen Sie dies:
```
//Find the div you want to update
var divArray = document.getElementById('progressbar');

//Set the width style
divArray.style.width = '100%';
```
Ich möchte den Wert zu erhöhen, entsprechend zu der Benutzer legen Sie den Wert in Sekunden mit diesem element habe ich zur Verfügung: <input type="text" id="speed" value="10" /> Beispiel, die der Anwender eingibt 30 ich will es bis zu 30 Sekunden für die Fortschrittsanzeige 100% zu erreichen

InformationsquelleAutor Daniel Pokusa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.