Aktuelle Uhrzeit anzeigen: Diese kleine Javascript-Funktion sorgt dafür, dass in einem frei plazierbaren Bereich auf der Webseite die Uhrzeit angezeigt wird. Der Artikel ist für unseren Smart-Home Bereich gedacht, um die aktuelle Uhrzeit auf einem Info-Display zuhause anzuzeigen – trotzdem kann man die Uhrzeit so auch auf jeder anderen Webseite anzeigen!
Das Skript: Hier zeigen wir als Beispiel, wie man eine gesamte, kleine Webseite hat, die zum Beispiel als <iframe> eingebunden werden kann. Möchte man die Uhrzeit in eine bereits bestehende Webseite einbauen, reicht es, wenn man nur den Skript-Teil und das Zeit-DIV oben kopiert:
<div id="zeit"></div>
Der Inhalt dieses DIV-Elements wird regelmäßig mit der Uhrzeit aktualisiert, so dass diese dort immer passend angezeigt wird.
Mit CSS Befehlen lässt sich das Element überall auf der aktuellen Seite platzieren, außerdem lassen sich bequem Farbe und Schriftart + Schriftgröße anpassen (wie das geht, zeigen wir hier!)
Wer die Uhrzeit nicht auf einer bestehenden Webseite einfügen möchte, sondern die gesamte HTML-Datei benötigt, kann den folgenden Code komplett kopieren und abspeichern. Er lässt sich dann zum Beispiel als <iframe> einbauen:
<iframe src="uhrzeit.html" border="0" frameborder="0" scrolling="no">
Uhrzeit mit Javascript: Der komplette Code
<html>
<body>
<div id="zeit"></div>
<script language="javascript" type="text/javascript">
window.setInterval("datum()",36000);
function datum() {
var zeit = new Date ();
var stunde = (zeit.getHours() < 10 ? '0' + zeit.getHours() : zeit.getHours());
var minute = (zeit.getMinutes() < 10 ? '0' + zeit.getMinutes() : zeit.getMinutes());
var sekunde = (zeit.getSeconds() < 10 ? '0' + zeit.getSeconds() : zeit.getSeconds());
document.getElementById("zeit").innerHTML = ' '
+ stunde + ':' + minute;
}
datum();
</script>
</body>
</html>
Sollen neben Minute und Stunde auch noch die Sekunden angezeigt werden, muss das Skript häufiger aufgerunden werden, damit die Anzeige der Sekunden auch richtig funktioniert: Dazu ändert man diese Zeile:
window.setInterval("datum()",36000);
in:
window.setInterval("datum()",1000);
Anschließend muss noch die Zeile:
+ stunde + ':' + minute;
in:
+ stunde + ':' + minute + ':' + sekunde;
geändert werden, um auch die Sekunden fortlaufend anzuzeigen.