dynamische Uhr (JavaScript Tutorial)

Tutorial erstellt von Tarik, letzte Änderung am 28.07.2008

Mit Javascript kann man in die statische Seite Bewegung einbringen, zum Beispiel in Form einer Uhr:

Hier erst einmal der komplette Quelltext (diesen speicherst du unter uhr.js ab):

Code:

function show()
{
  var Digital = new Date();
  var hours   = Digital.getHours();
  var minutes = Digital.getMinutes();
  var seconds = Digital.getSeconds();

  if (hours <= 9)
    hours = "0" + hours;
  if (minutes <= 9)
    minutes = "0" + minutes;
  if (seconds <= 9)
    seconds = "0" + seconds;

  document.getElementById("uhr").innerHTML = "Uhrzeit: " + hours + ":" + minutes + ":" + seconds;

  setTimeout("show()", 1000);
}

show();

Wie man sieht, ist fast das ganze Skript eine Funktion und zwar show(). Code in einer Funktion einzuschließen, dient dem Zweck, dass man die Anweisungen mit einem Namen ansprechen kann und somit immer wieder wiederholen kann, was ja bei einer Uhr nötig ist - in jeder Sekunde erfolgt ein Aufruf.

In dieser Funktion steht nun:
Code:

  var Digital = new Date();
  var hours   = Digital.getHours();
  var minutes = Digital.getMinutes();
  var seconds = Digital.getSeconds();

Mit new Date() holt sich Javascript die Uhrzeit, und zwar als UTC, also als Anzahl Sekunden seit 1.1.1970 00:00. Das ist natürlich schwer lesbar.
Mit den Methoden getHours, getMinutes und getSeconds beschafft man sich die gewünschten Angaben und speichert sie dann in Variablen: Sprich die Stunden in der Variablen "hours", die Minuten in der Variablen "minutes" und die Sekunden in der Variablen "seconds".

Als nächstes kommen ein paar If-Anweisungen:

Code:

  if (hours <= 9)
    hours = "0" + hours;
  if (minutes <= 9)
    minutes = "0" + minutes;
  if (seconds <= 9)
    seconds = "0" + seconds;

Dort wird, falls die Stunden-, Minuten- oder Sekundenzahl unter oder gleich 9 ist, also nur einstellig, eine Null davorgeschrieben und in der Variablen gespeichert, damit nicht solche Zeiten wie 9:9:8 entstehen.

Als nächstes steht im Quelltext folgendes:

Code:

document.getElementById("uhr").innerHTML = "Uhrzeit: " + hours + ":" + minutes + ":" + seconds;

Mit document.getElementById() kann man bestimmte HTML-Elemente genau identifizieren. Mit document.getElementById("uhr") kann man also auf ein Div oder ein anderes HTML-Element mit id="uhr" zugreifen.
innerHTML enthält den HTML-Inhalt eines Elements; wenn man innerHTML einen neuen Inhalt zuweist, verändert man damit das Dokument. Das Skript schreibt also in das HTML-Element die Uhrzeit.

Danach folgt der Befehl:

Code:

setTimeout("show()", 1000);

Dieser weist das Programm an, 1000 Millisekunden zu warten und dann die Funktion show() aufzurufen. Dies sorgt dafür, dass sich show() immer wieder selbst aufruft. - In der letzten Zeile steht einfach nur:

Code:

show();

Hier wird das ganze Skript überhaupt erst ausgeführt, erst hier passiert etwas. Und ab dann -setTimeout- alle 1000 Millisekunden.
Zum Einbau: Irgendwo im HTML-<body> schreiben wir ein Div mit id="uhr" und darunter den JavaScript-Block:

Code:

Fertig! Wenn JavaScript aktiviert ist, wird die Uhrzeit gezeigt, wenn JS nicht aktiviert ist, bleibt unser Uhr-Div leer und i.d.R. unsichtbar.

Viel Spaß!!!

Bei Fragen:
E-mail: MLiedtke@gmx.de

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Photoshop

Cinema 4d

HTML / CSS

JavaScript

PHP

Flash

Fotografie

Terragen

Webserver

Informatik

Sonstige

dynamische Uhr (JavaScript Tutorial)