
Tipp:
» Den Code für das Uhrzeit-Skript haben wir hier!
» Den Code für die Monatsübersicht haben wir hier!
Dieses einfache Code-Beispiel zeigt per Javascript das aktuelle Datum an – dazu braucht man nur ein DIV-Element zu definieren, in das das Datum geschrieben wird. Das DIV-Element lässt sich später per CSS platzieren und die Schriftart, -größe oder -farbe ändern (wie das geht, zeigen wir hier!).
Damit auch immer das aktuelle Datum angezeigt wird, wird das Skript alle 60 Sekunden (60.000 Milisekunden) erneut ausgeführt – diesen Intervall kann man später aber in dieser Zeile anpassen:
window.setInterval("datum()",60000);
Das Skript befindet sich in einer sehr einfachen HTML Datei, die so schon komplett alleine funktioniert (wenn man sie etw mit einem <iframe> direkt in eine andere, bestehende Seite einbauen möchte.
Möchte man nur das Skript kopieren, braucht man neben dem Javascript Code auch undebingt diese Zeile, ohne dass das Datum nicht angezeigt werden kann:
<div id=”datum”></div>
Das Skript zeigt mit unserem Code das Datum wie folgt an:
Dienstag, der 19. Juli 2016
Das lässt sich aber auch anpassen: Die Ausgabe erfolg in dem Bereich nach “innerHTML”. Möchte man statt dem Monatsnamen nur die Zahl anzeigen lassen, reicht es, wenn man diese Zeile:
+ monate[d.getMonth()] + ' ' + d.getFullYear();
gegen diese austauscht:
+ d.getMonth() + '. ' + d.getFullYear();
Datum mit Javascript anzeigen: Der komplette Code
<html>
<body>
<div id="datum"></div>
<script language="javascript" type="text/javascript">
window.setInterval("datum()",60000);
function datum() {
var d = new Date();
var wochentage = new Array ("Sonntag", "Montag", "Dienstag",
"Mittwoch", "Donnerstag", "Freitag", "Samstag");
var monate = new Array ("Januar", "Februar", "März", "April",
"Mai", "Juni", "Juli", "August", "September",
"Oktober", "November", "Dezember");
document.getElementById("datum").innerHTML = ' '
+ wochentage[d.getDay()] + ', der ' + d.getDate() + '. '
+ d.getMonth() + '. ' + d.getFullYear();
}
window.onload=datum
</script>
</body>
</html>