Geschrieben von vvale am 08.08.2006, 23:59

Mit PHP kann man sehr einfach eine Uhr ausgeben lassen. Ist ein User nun aber 10 Stunden auf einer Seite, so wird immer noch die alte Zeit angezeigt.

Interessant wäre also eine tickende Uhr, die einfach sekündlich aktualisiert wird. Hier muss statt auf PHP auf Javascript zurückgegriffen werden!

Hinter einem Javascript zu einer tickenden Uhr steckt eigentlich eine simple Grundüberlegung:

Der Inhalt eines HTML-Elementes muss in einem bestimmten Zeitintervall mit der aktuellen Zeit gefüttert werden

Nehmen wir also ein simples <div>-Element und geben ihm die id "time":

<div id="time"></div>

Nun ist es Zeit für das Javascript. Im Prinzip brauchen wir zwei Funktionen. Zum einen - logisch - die Javascript-Datumsfunktion(en), zum anderen eine Funktion, die ein Script alle X Sekunden ausführt, seines Zeichens die Funktion setInterval.

setInterval muss also alle 1000 Millisekunden (eine Sekunde) zum einen die aktuelle Zeit generieren und zum anderen diese in das "time"-div-Element schreiben.

Um diese beiden Aktionen zu vereinen benutzen wir eine Funktionen, nennen wir sie "changetime".

Ich kommentiere das Script:

<script type="text/javascript">

function changetime(){ // Anlegen der Funktion, keine Parameter nötig

var now = new Date(); // Die Angaben zum aktuellen Datum/Zeit werden zur Weiterverarbeitung in die Variable "now" geschrieben

// Im folgenden wird ein String aus der aktuellen Stunde (get.Hours), der aktuellen Minute (get.Minutes) und der aktuellen Sekunde (get.Seconds) erzeugt und in die Variable zeit gespeichert (HH:mm:ii)

zeit = now.getHours()+":"+(now.getMinutes()<10?"0":"")+now.getMinutes()+":"+(now.getSeconds()<10?"0":"")+now.getSeconds();

// Diese Variable muss nun in das div-Element mit der id "time" geschrieben werden, das funktioniert mit innerHTML
document.getElementById("time").innerHTML=zeit;
}

// Sekündlich ausführen (mit setInterval)
window.setInterval("changetime()", 1000);

</script>

...und schon tickt die Uhr!

Viel Spa&szlig; damit.

R&uuml;ckfragen sehr gern per eMail an valentindietrich ,at´ gmail ~dot~ com

Bewertung Anzahl
6
23,1 %
6 Bewertungen
5
46,2 %
12 Bewertungen
4
15,4 %
4 Bewertungen
2
7,7 %
2 Bewertungen
1
7,7 %
2 Bewertungen