//// Visualisierung eines Counters für beispielsweise die SessionTime // 1. Beim laden des Dokuments muss die Methode // stoStartCounter(Sekunden, Blöcke, parentElement, doPostBack) gestartet werden. Bsp: // (Blöcke -> Progressbar-Items) // 2. Die Methode schreibt eine HTML-Tabelle in das angegebene HTML-Element (parentElement), das vorhanden sein muss: //

// 3. Die in 2. beschriebene HTML-Tabelle ist mit drei CSS-Class-Definitionen ausgestattet: // td.progresstext // { // font-family: Arial,Helvetica,sans-serif; // font-size: 11px; // text-align: left; // color: #2B628A; // } // td.progressbarActiveBlock // { // background-color: #2B628A; // width: 8px; // height: 2px; // border: 1px solid #2B628A; // } // td.progressbarInactiveBlock // { // background-color: #EDF3F9; // width: 8px; // height: 2px; // border: 1px solid #C2D8EE; // } // table.progressbar // { // border: 1px solid #C2D8EE; // border-collapse: separate; // margin: 5px; // } // meine globalen Variablen initialisieren var aktTime; // derzeitige Restzeit des Counters zur Laufzeit var aktProgress; // aktuelle Anzahl aktiver Blöcke var aktIntervall; // Zeit im ms, die während des aktuellen Blocks verstrichen ist var counter; // setIntervall-Objekt var myElement; // Methode zum Aufrufen und Starten des Counters function stoStartCounter(seconds, blocks, parentElement, doPostBack) { try { // Variablen initialisieren myElement = document.getElementById(parentElement); aktProgress = blocks; var maxTime = seconds * 1000; // Gesamtdauer des Counters aktTime = maxTime; aktIntervall = 0; var callIntervall = 1000; // Intervall in Millisekunden, in dem die // Aktualisierung des Steuerelements durchgeführt // wird (Default: 1 Sekunde == 1000 ms) // Counter-Steuerelement ins HTML schreiben und dann die Intervalle auslösen stoCounterHTML(blocks); counter = window.setInterval("stoToggleProgress(" + callIntervall + ", " + maxTime + ", " + blocks + ", " + doPostBack + ")", callIntervall); } catch (e) { } } // Hilfsmethode zum Steuern des Progressbar function stoToggleProgress(milliseconds, maxTime, maxProgress, doPostBack) { try { // Variablen initialisieren var maxIntervall = maxTime / maxProgress; // Zeit im Millisekunden, die pro Block vorgesehen ist aktTime = aktTime - milliseconds; aktIntervall = aktIntervall + milliseconds; // beendet setInterval(counter) wenn die Gesamtzeit (in ms) abgelaufen ist if (aktTime < milliseconds -1) { for (var i = 1; i < aktProgress + 1; i++) { document.getElementById("stoTimerProgressID" + i).className = "progressbarInactiveBlock"; document.getElementById("stoTimerProgressTime").innerHTML = "0"; } if (doPostBack) stoDoPostBack(); window.clearInterval(counter); } // Countdown-Zeit im Steuerelement setzen (Minuten:Sekunden) var minutes = Math.floor(aktTime/60000); if (minutes < 10) minutes = "0" + minutes; var seconds = ((aktTime/1000) % 60); if (seconds < 10) seconds = "0" + seconds; document.getElementById("stoTimerProgressTime").innerHTML = "Verbleibende Zeit: " + minutes + ":" + seconds; // wenn ein Intervallzeitraum abgelaufen ist, aktualisiere den Progressbar if (aktIntervall > maxIntervall - 1) { aktIntervall = 0; var myProgressDecr = (Math.round(maxProgress / (maxTime / 1000))); if (myProgressDecr == 0) { document.getElementById("stoTimerProgressID" + aktProgress).className = "progressbarInactiveBlock"; aktProgress--; } else { for (var i = aktProgress; i > (aktProgress - myProgressDecr); i--) { document.getElementById("stoTimerProgressID" + i).className = "progressbarInactiveBlock"; } aktProgress = aktProgress - myProgressDecr; } } } catch (e) { } } // Hilfsmethode zum Erstellen der HTML-Tabelle function stoCounterHTML(blockCount) { try { var myTable = document.createElement("table"); // Attributes fuer Tabelle setzen myTable.setAttribute("border", "0", 0); myTable.setAttribute("cellspacing", "2", 0); myTable.setAttribute("cellpadding", "0", 0); // 1. Zeile einfuegen var myRow1 = myTable.insertRow(0); // Uebrige Sessiontime als Text var TD1 = document.createElement("td"); TD1.className = "progresstext"; var TD1text = document.createTextNode("Verbleibende Zeit: "); TD1.setAttribute("id", "stoTimerProgressTime"); TD1.appendChild(TD1text); myRow1.appendChild(TD1); // Unter-Tabelle einfuegen var TD2 = document.createElement("td"); var mySubTable = document.createElement("table"); mySubTable.className = "progressbar"; var mySubTableRow = mySubTable.insertRow(0); // Gewünschte Zahl Blöcke for (var i = 0; i < blockCount; i++) { var TD = document.createElement("td"); TD.className = "progressbarActiveBlock"; TD.setAttribute("id", "stoTimerProgressID" + (i+1)); mySubTableRow.appendChild(TD); } TD2.appendChild(mySubTable); myRow1.appendChild(TD2); myElement.appendChild(myTable); } catch (e) { } } function stoDoPostBack() { try { var theForm = document.forms[0]; theForm.submit(); } catch (e) { } }