Laufende Uhr im Text

von Thomas Salvador.

In "Laufende Uhren" wurde gezeigt, wie man in Javascript eine Uhr realisiert, die die aktuelle Zeit in der Statuszeile des Browsers, in einem Textfeld oder in einem Button darstellt.

Hier finden Sie nun eine laufende Uhr, die Sie frei platzieren können.

Darüber hinaus können Sie das Javascript direkt von meinem Server laden und nutzen.

Der Source

Wir erstellen eine Datei clock.js, die das Javascript enthält (oder laden es direkt von meinem Server, siehe Beispiel):

// clock II - Thomas Salvador, 2010, https://brauchbar.de
// free to use, if this notice is kept intact

function clock_update(id) {
  container = document.getElementById(id);

  var now = new Date();

  var h= now.getHours();
  if  (h <10) { h="0"+h; }
  var m= now.getMinutes();
  if  (m <10) { m="0"+m; }
  var s= now.getSeconds();
  if  (s <10) { s="0"+s; }

  container.innerHTML = h+":"+m+":"+s;
  setTimeout('clock_update("'+id+'")',1000);
}

Die Dokumentation

Das Script unterstützt die Platzierung in einem beliebigen Platzhalter id.

Die ausgebende Routine clock_update(id) erzeugt den Ausgabewert in der Form 00:00:00 und gibt sie im Container id aus.

Abschließend wird die Ausführung von clock_update() mit Hilfe von setTimeout() erneut angefordert.

Die Verwendung

Sie müssen das Javascript nur einbinden und die Uhr starten.

Zur Einbindung platzieren Sie im Kopfbereich Ihres Dokumentes die Anweisung

<script type="text/javascript" src="clock.js"></script>

Sie können es direkt von meinem Server laden:

<script type="text/javascript" src="https://brauchbar.de/services/clock-100.js"></script>

Nun legen Sie fest, wo die Uhr erscheinen stehen soll und erzeugen dort einen leeren Container mit entsprechendem Namen:

<span id="meineuhr"></span>

Abschließend lassen Sie dieses Script starten, wenn das Dokument geladen wurde. Geeignet ist hier der onload-Event des <body>-Tag:

<body onload="clock_update('meineuhr');">

Das Beispiel

<html>
<head>
<title>Uhr-Beispiel</title>
<script type="text/javascript"
  src="https://brauchbar.de/services/clock-100.js"></script>
</head>
<body onload="clock_update('meineuhr');">
<p>Hallo Besucher. Es ist jetzt <span id="meineuhr"></span>. Viel Spaß.</p>
</body>
</html>

Das sieht dann so aus:

Hallo Besucher. Es ist jetzt . Viel Spaß.