JavaScript Uhr in HTML-Dokument anzeigen

JavaScript Uhr in HTML-Dokument anzeigen - urbanstudio webdesign berlin
iStockPhoto

Zuweilen möchte man auf einer Webseite die Systemzeit mit einer JavaScript Uhr ausgeben. Die bekannte JavaScript-Funktion Date() gibt allerdings zunächst nur die aktuelle Systemzeit zurück. Mit diesem kleinen Script lassen wir die Uhr im wahrsten Sinne ticken und lösen das Problem.

Code-Snippet JavaScript Uhr

Für unser Beispiel benötigen wir zunächst einen Platzhalter für die Uhr. Hier ein DIV.

Die folgende Funktion löst schließlich das Problem und erweckt unsere JavaScript Uhr zum Leben. Am besten schreibt man diese in den <head>-Bereich der jeweiligen Website.

function ticken(){
  var stunden, minuten, sekunden;
  var StundenZahl, MinutenZahl, SekundenZahl;
  var heute;

  heute = new Date();
  StundenZahl = heute.getHours();
  MinutenZahl = heute.getMinutes();
  SekundenZahl = heute.getSeconds();

  stunden = StundenZahl+":";
  if (MinutenZahl < 10) {minuten = "0" + MinutenZahl + ":";}
    else {minuten = MinutenZahl + ":";}
  if (SekundenZahl < 10) {sekunden = "0" + SekundenZahl + " ";}
    else {sekunden = SekundenZahl + " ";}
  zeit = stunden + minuten + sekunden + " Uhr";
  uhr.innerHTML = zeit;

  window.setTimeout("ticken();", 1000);
}

window.onload = ticken;

Jetzt tickt die JavaScript Uhr, dank der kleinen Funktion, welche mit der setTimeout-Funktion die Sekunden und Minuten iterativ erhöht.

Oli Feiler 3. November 2015
Tags: ·