Progressbar

Fragen und Antworten zur clientseitigen Programmiersprache JavaScript

Progressbar

Beitragvon Zensiert1997 am Do 13. Jan 2011, 18:17

Hi alle zusammen,

Ich will einen Ladebalken anzeigen während eine Tabelle lädt. Ich weiß auch das man einen Ladebalken in html5 einfach mit <meter> oder <progress> erstellen kann. :mrgreen: :mrgreen:
Das Problem ist das der Ladebalken erst nachdem die Funktion fertig ist aktualisiert wird, obwohl das eigentlich früher passieren sollte.

Kann mir bitte jemand helfen?

Vielen Dank schonmal im vorraus.
Zensiert1997
 
Beiträge: 6
Registriert: Do 13. Jan 2011, 18:10

Beitragvon alm am Do 13. Jan 2011, 19:57

Hallo,

der Fortschritt wird nicht automatisch aktualisiert. Woher soll denn der Balken wissen wie weit die Funktion gelaufen ist? Während die Funktion läuft, muss der Fortschritt an das Progress-Element "gemeldet" werden. Das Attribut Value muss durch die Funktion auf den entsprechenden Fortschrittswert gesetzt werden.

Gruß
Alex
EvoComp.de
Beachten Sie unsere Beispiele zu JavaScript, PHP und Ajax, sowie unser PHP MySQL Tutorial
alm
 
Beiträge: 81
Registriert: Do 21. Feb 2008, 16:22
Posts

Beitragvon Zensiert1997 am Do 13. Jan 2011, 20:14

Danke aber,

Teoretisch wird das Element aktualisiert mit document.getElementById("name").value = progress; In der Variable progress steht der Fortschritt der Zeilen und das attribut max ist vorher auf die Zahl der Spalten gesetzt.
Hier der Code:
Code: Alles auswählen
<html>
<head>
   <title>Schalter m&ouml;glichkeiten</title>
   <script type="text/javascript">
   function showtable() {
      var anz = parseInt(document.getElementById("anz").value);
      var zahl = Math.pow(2, anz);
      var binstr = zahl.toString(2);
      var laenge = binstr.length;
      var t = "<table border='0' cellpadding='1em' cellspacing='1em' style='text-align:center;'>";
      var number = parseInt("0");
      t = t + "<tr>";
      for(var k = 1; k < laenge; k++) {
         t = t + "<th>Schalter" + parseInt(k) + "</th>";
      }
      t = t + "</tr>";
      for(var i = 0;i < zahl; i++) {
         t = t + "<tr>";
         number = i.toString(2);
         for(var a = 1; a < laenge - number.length; a++) {
                  t = t + "<td>0</td>";
         }
         for(var j = 0; j <= laenge; j++) {
            t = t + "<td>" + number.substring(j, j + 1) + "</td>";
         }
         t = t + "</tr>";
      }
      t = t + "</table>";
      document.getElementById("tabelle").innerHTML = t;
   }
   </script>
</head>
<body>
   <span id="container" style="visibility: visible">
      Anzahl Schalter:<input type="text" id="anz"><button type="text" onclick="javascript:showtable()">Tabelle erstellen</button>
   </span>
   <span id="tabelle" style="overflow: auto">
      
      <!-- Hier wird die Tabelle eingesetzt -->
      
   </span>
</body>
</html>


Wenn man in das Input Feld z.B. 15 einsetzt rechnet der Computer erstmal ein bisschen, aber der Balken funktioniert trotzdem nicht. Vielleicht findet ja jemand den Fehler.

Trotzdem vielen Dank!
Zensiert1997
 
Beiträge: 6
Registriert: Do 13. Jan 2011, 18:10

Beitragvon alm am Fr 14. Jan 2011, 10:24

Hallo,

der Fortschrittsbalken fehlt und auch die Aktualisierung ist im Code nicht zu finden. Sie sollte aber auf genau diese Art funktionieren. Wenn während des Laufs keine Aktualisierung erfolgt, dann liegt das daran, dass das Script eine höhere Priorität besitzt als die Aktualisierung des Darstellungsfensters. Das Script muss zwischendurch lange genug pausieren um dem Browser Zeit zur Aktualisierung des Darstellungsfensters zu geben. Setz mal testweise Timeout-Intervalle in die Verarbeitung nach denen die Erstellung der Tabelle wieder aufgenommen wird.

Gruß
Alex
EvoComp.de
Beachten Sie unsere Beispiele zu JavaScript, PHP und Ajax, sowie unser PHP MySQL Tutorial
alm
 
Beiträge: 81
Registriert: Do 21. Feb 2008, 16:22
Posts

Falsches Skript

Beitragvon Zensiert1997 am Fr 14. Jan 2011, 15:26

Hi,

Mir ist aufgefallen das ich das falsche Skript genommen hab.

Die Idee mit dem Timeout ist gut! Ich muss sie noch ausprobieren, aber die Erklärung klingt logisch!

Vielen Dank, probier dann das ganze mal mit Timeout aus!!
Zensiert1997
 
Beiträge: 6
Registriert: Do 13. Jan 2011, 18:10

Klappt!!

Beitragvon Zensiert1997 am Fr 14. Jan 2011, 15:53

Danke Alex,

Ich habs mit setInterval gemacht und es klappt prima!!!

Vielen Dan!
Zensiert1997
 
Beiträge: 6
Registriert: Do 13. Jan 2011, 18:10


Zurück zu JavaScript

cron