Intelligente Formulare - HTML5 - page 53

Für die Textausgabe verwenden wir zusätzlich das in Abschnitt 3.3.5, Berech-
nungen mit »output«, vorgestellte output -Element. Als Erstes wird in Java-
Script aber das aktuelle Datum erzeugt und das meter -Element initialisiert:
var today = new Date();
var m = document.getElementById("m");
m.min = new Date(today.getFullYear(), 0, 1);
m.max = new Date(today.getFullYear(), 11, 31);
// m.optimum = m.min-m.max/2;
m.value = today;
Die Variable today enthält die Anzahl an Millisekunden seit dem Beginn der
UNIX-Epoche (dem 1.1.1970). Damit unser meter -Element eine vernünftige
Skala erhält, wird der min -Wert auf den 1. Januar des aktuellen Jahres einge-
stellt, der max -Wert entsprechend auf den 31. Dezember. Der Wert des meter -
Elements wird in der letzten Zeile des Listings eingestellt, und die grafische
Anzeige ist komplett. Wer den hier ausgeklammerten optimum -Wert aktiviert
(in diesem Fall die Mitte des Jahres), wird je nachdem, ob das Script in der
ersten oder in der zweiten Jahreshälfte aufgerufen wird, eine entsprechende
Veränderung der Anzeige erkennen. Wunderbar, wie einfach das neue Element
zu verwenden ist.
Doch kommen wir nun zu den restlichen Elementen auf unserer HTML-Seite.
Das mit der ID op gekennzeichnete output -Element wollen wir mit dem Pro-
zentwert der vergangenen Tage belegen. Die Prozentrechnung wird mit Math
.round() von ihren Kommastellen befreit, eine Genauigkeit, die für unser Bei-
spiel ausreichend ist. Anschließend wird der span -Bereich ( opText ) mit diesem
Wert belegt.
var op = document.getElementById("op");
op.value =
Math.round(100/(m.max-m.min)*(m.value-m.min));
var opText = document.getElementById("opText");
opText.innerHTML = op.value;
var innerDIV = document.getElementById("innerDIV");
innerDIV.style.width=op.value+"%";
innerDIV.style.background = "green";
Der Rest dieses Beispiels hat zwar nichts mehr mit neuen HTML5-Techniken
zu tun, wird aber aus Gründen der Vollständigkeit auch noch erklärt. Die ver-
schachtelten div -Elemente wollen wir ebenfalls mit dem Prozentwert befüllen.
Die Idee dahinter ist simpel: Ein erster div -Bereich wird mit einer fixen Breite
in HTML definiert (hier 150px ). Ein darin verschachteltes div -Element wird mit