Index
Laufende Uhrzeit
Eine Laufende Uhr kann mit nur wenig Aufwand eingebunden werden. Hierfür bedient man sich dem JavaScript Date()-Objekt. Dieses bietet eine Vielzahl Methoden, die jeweils Teile des Datums (Tag des Jahres, Monat, Jahr, Stunde des Tages, ... ) liefern. Wir bedienen uns hier zusätzlich der Funktion leadingzero(), um führende Nullen anzuhängen (Aus: 9:35 wird 09:35). Der Aufruf setTimeout("setDateTime()",1000); sorgt dafür, dass die Uhrzeit jede Sekunde aktualisiert wird.
Das Beispiel führt zu einem Zeitstempel der Form: ....
Die Funktion leadingzero() sieht folgendermassen aus
Auf der Webseite eingebunden wird die Ausgabe mit folgendem Code
Um die Uhrzeit in der Titelleiste anzuzeigen ändern Sie die rot gefärbte Zeile folgendermaßen ab:
Das Beispiel führt zu einem Zeitstempel der Form: ....
function setDateTime() {
var time = new Date();
document.getElementById('time').firstChild.nodeValue =
leadingzero(time.getDate(),2) + "."
+ leadingzero((time.getMonth()+1),2) + "."
+ time.getFullYear() + ", "
+ leadingzero(time.getHours(),2) + ":"
+ leadingzero(time.getMinutes(),2) + ":"
+ leadingzero(time.getSeconds(),2);
setTimeout("setDateTime()",1000);
}
var time = new Date();
document.getElementById('time').firstChild.nodeValue =
leadingzero(time.getDate(),2) + "."
+ leadingzero((time.getMonth()+1),2) + "."
+ time.getFullYear() + ", "
+ leadingzero(time.getHours(),2) + ":"
+ leadingzero(time.getMinutes(),2) + ":"
+ leadingzero(time.getSeconds(),2);
setTimeout("setDateTime()",1000);
}
Die Funktion leadingzero() sieht folgendermassen aus
function leadingzero(n,s) {
b=1; z=0;
for(i=1; i<s; i++) {
for(x=1; x<=i; x++) b = b * 10;
if(n<b) z++;
}
for(i=1; i<=z; i++) n = "0" + n
return n;
}
b=1; z=0;
for(i=1; i<s; i++) {
for(x=1; x<=i; x++) b = b * 10;
if(n<b) z++;
}
for(i=1; i<=z; i++) n = "0" + n
return n;
}
Auf der Webseite eingebunden wird die Ausgabe mit folgendem Code
<body onLoad="setDateTime();">
<span id="time">
lade Uhrzeit...
</span>
<span id="time">
lade Uhrzeit...
</span>
Um die Uhrzeit in der Titelleiste anzuzeigen ändern Sie die rot gefärbte Zeile folgendermaßen ab:
document.title =
Anzeige der noch verfügbaren Zeichen in einem Textfeld
Viele Webseiten verwenden eine Anzeige, der noch zulässigen Zeichen in Textfeldern. Ein Beispiele, das fast jeder kennt ist etwa die Zeile für den Bewertungstext auf der eBay Webseite. Sinnvoll ist dies gerade dann, wenn Sie die Eingaben in einer Datenbank speichern möchten und dadurch auf eine Zeichenbegrenzung achten müssen. Mit nur wenigen Zeilen JavaScript ist es möglich, die Eingabe auf eine beliebige Zeichenzahl zu begrenzen und die Anzahl noch zulässiger Zeichen anzuzeigen.
Die Variable erlaubteLaenge legt fest, wie viele Zeichen zulässig sind. Die aktuelle Zeichenzahl im Eingabefeld wird per document.getElementById('eingabe').value.length ermittelt und mit der erlaubten Zeichenzahl verglichen. Wird die erlaubte Anzahl überschritten, so bedienen wir uns der rot gefärbten Zeile, um die überschüssigen Zeichen zu löschen.
Das zugehörige HTML Formular hat folgendes Aussehen. Beachten Sie die rot eingefärbten Zeilen, die jeweils den Aufruf des JavaScriptes bewirken.
Die Variable erlaubteLaenge legt fest, wie viele Zeichen zulässig sind. Die aktuelle Zeichenzahl im Eingabefeld wird per document.getElementById('eingabe').value.length ermittelt und mit der erlaubten Zeichenzahl verglichen. Wird die erlaubte Anzahl überschritten, so bedienen wir uns der rot gefärbten Zeile, um die überschüssigen Zeichen zu löschen.
function zeichen(form) {
var erlaubteLaenge = 200;
var aktuelleLaenge = document.getElementById('eingabe').value.length;
if(aktuelleLaenge > erlaubteLaenge) {
document.getElementById('eingabe').value =
document.getElementById('eingabe').value.substring(0, erlaubteLaenge);
restZeichen = 0;
} else {
restZeichen = erlaubteLaenge - aktuelleLaenge;
}
document.getElementById('restZeichen').value = restZeichen;
}
var erlaubteLaenge = 200;
var aktuelleLaenge = document.getElementById('eingabe').value.length;
if(aktuelleLaenge > erlaubteLaenge) {
document.getElementById('eingabe').value =
document.getElementById('eingabe').value.substring(0, erlaubteLaenge);
restZeichen = 0;
} else {
restZeichen = erlaubteLaenge - aktuelleLaenge;
}
document.getElementById('restZeichen').value = restZeichen;
}
Das zugehörige HTML Formular hat folgendes Aussehen. Beachten Sie die rot eingefärbten Zeilen, die jeweils den Aufruf des JavaScriptes bewirken.
<form>
Nachricht:
<textarea cols="30" rows="5" name="eingabe" id="eingabe"
onblur="zeichen(this);"
onchange="zeichen(this);"
onfocus="zeichen(this);"
onkeydown="zeichen(this);"
onkeyup="zeichen(this);">
</textarea>
Noch <input size="3" name="restZeichen" id="restZeichen" value="200" /> Zeichen
</form>
Nachricht:
<textarea cols="30" rows="5" name="eingabe" id="eingabe"
onblur="zeichen(this);"
onchange="zeichen(this);"
onfocus="zeichen(this);"
onkeydown="zeichen(this);"
onkeyup="zeichen(this);">
</textarea>
Noch <input size="3" name="restZeichen" id="restZeichen" value="200" /> Zeichen
</form>
Validation Info
Dieses Dokument entspricht den aktuellen HTML / CSS Standards.
