Date
<script> var datum = new Date();
document.write(datum.getYear()); </script>
Hier wird das aktuelle Jahr angezeigt.
new Date();Zuerst muß man eine Instanz des Datum Objektes erschaffen. Das geschieht mit newDate().
Diese Instanz habe ich der Variablen, die ich hier mal datum genannt habe, zugewiesen.
datum.getYear()
Anschließend kann man sich aus diesem Datumsobjekt die einzelnen Methoden
rausholen, z.B.: das Jahr mit datum.getYear()
Weitere Methoden
| getTime() | Millisekunden | |
| getSeconds() | Sekunde | |
| getMinutes() | Minute | |
| getHours() | Stunde | |
| getDate() | Tag | |
| getMonth() | Monat | |
| getFullYear() | Jahr | |
| getDay() | Wochentag | Ganzzahlen für die Wochentage, beginnend bei 0 für Sonntag. |
Datum mit Wochentag und Monatsnamen anzeigen
Eine Möglichkeit das aktuelle Datum in Methode des Landes anzeigen zu lassen ist über die Methode
date.toLocaleString();
Eine etwas komplexere Möglichkeit mit Wochentag-Namen und Monatsnamen findet man in folgendem Beispiel.
<script>
let datum = new Date();
let wochentag = ["Sonntag", "Montag", "Dienstag",
"Mittwoch", "Donnerstag", "Freitag","Samstag"];
let datum = new Date();
let wochentag = [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag"
];
let monat = [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
]
document.write(
wochentag[datum.getDay()]
+ " " +
datum.getDate()
+ ". " +
monat[datum.getMonth()]
+ " " +
datum.getFullYear()
</script>
Zuerst wird das Date Objekt erzeugtvar datum = new Date();Dann wird ein Array mit deutschen Wochentagen und eins mit deutschen Monaten erzeugt.
wochentag=new Array("Sonntag", "Montag",
"Dienstag", "Mittwoch", "Donnerstag", "Freitag","Samstag");getDay() gibt ganzahlige Werte für die Wochentage zurück, beginnend bei 0 für Sonntag.
wochentag[datum.getDay()]Das gleiche Prinzip greift auch bei den Monaten. Auch hier ist der erste Wert 0 für den Monat Januar.
Wenn man die Monate als Zahl darstellen wollte müsste man beachten, dass .getMonth() bei 0 für Januar beginnt. Deshalb müsste
eine 1 hinzuaddiert werden. (datum.getMonth()+1)
Zeitraum ausrechnen
In diesem Beispiel (Script siehe unten) wird der Zeitraum bis Weihnachten diesen Jahres ausgerechnet. Dazu werden 2 Date-Objects erzeugt: now und xmas
In der Konstruktorfunktion newDate() kann man Argumente für ein Datum einfügen:
new Date(Jahr, Monat (Januar ist 0), Tag , Stunde, Minute, Sekunde, Millisekunde)
Das xmas Jahr wird aus dem jetzigen Jahr erzeugt now.getFullYear().
Die getTime() Methode gibt einen nummerischen Wert zurück, der die Zeit gemäß der Weltzeit (UTC) angibt.
Da der Zeitwert in Millisekunden zurückgegeben wird, muss man ihn mit 1000 dividieren, um Sekunden zu erhalten.
Nun kann man Berechnungen anstellen. In diesem Fall, wird der Zielzeitpunkt Weihnachten xmas.getTime() von der Jetztzeit abgezogen now.getTime().
Wenn das Ergebnis im Minusbereich liegt, ist Weihnachten in diesem Jahr schon vorbei. Dann wird xmas auf das nächste Jahr Weihnachten gesetzt now.getFullYear()+1 und erneut die Zeitdifferenz errechnet. datedif
if (datedif < 0) {
xmas = new Date((now.getFullYear() + 1), 11, 24, 0, 0, 0)
datedif = Math.floor(xmas.getTime() - now.getTime()) / 1000;
}
Nun werden die Tage, Stunden, Minuten und Sekunden errechnet, aber nicht in dem Sinne, dass die gesamte Zeit in Tagen, oder Stunden oder Minuten oder Sekunden errechnet wird, sondern im Sinne von, Tage plus Stunden plus Minuten plus Sekunden.
datedif ist die Zeit in Sekunden und muss umgerechnet werden
| Eine Minute hat 60 Sekunden | 1 * 60 = | 60 sec |
| Eine Stunde hat 60 Minuten | 60 * 60 = | 3600 sec |
| Ein Tag hat 24 Stunden | 60 * 60 * 24 = | 86400 sec |
tagefull = datedif (Gesamtzeit) / 86400 (1 Tag)
Der Wert wurde mit Math.floor() nach unten hin abgerundet.
let tagefull = Math.floor(datedif / 86400);
Wenn der Wert nicht abgerundet würde, hätte man eine Kommazahl. 12.5 wäre demnach 12 ein halb Tage, oder 12 Tage und 12 Stunden. Die Stellen hinter dem Komma würden der Restzeit entsprechen.
Diese Restzeit kann man auch mittels Modulo errechnen datedif % 86400
Das Ergebnis in Sekunden wird durch 3600 geteilt um Stunden zu erhalten und wieder mit Math.floor() abgerundet.
stunderest = Math.floor((datedif % 86400) / 3600);
Die restlichen Minuten und die restlichen Sekunden werden auf die gleiche Art berechnet.
Im eigentlichen Beispiel wurde alles in eine Funktion eingebettet, welche mit setInterval() jede Sekunde aufgerufen wird.
<script>
let now = new Date();
let xmas = new Date(now.getFullYear(), 11, 24, 0, 0, 0);
let datedif = Math.floor(xmas.getTime() - now.getTime()) / 1000;
if (datedif < 0) {
xmas = new Date((now.getFullYear() + 1), 11, 24, 0, 0, 0)
datedif = Math.floor(xmas.getTime() - now.getTime()) / 1000;
}
let tagefull = Math.floor(datedif / 86400);
let stunderest = Math.floor((datedif % 86400) / 3600);
let minuterest = Math.floor(((datedif % 86400) % 3600) / 60);
let sekunderest = Math.floor((datedif % 86400) % 3600) % 60;
let textAusgabe = tagefull + " Tage und " + stunderest +
" Stunden und " + minuterest + " Minuten und " + sekunderest + " Sekunden";
document.getElementById("anzeige").innerHTML = "Bis Weihnachten sind es insgesamt "
+ datedif + " Sekunden oder";
document.getElementById("anzeige2").innerHTML = textAusgabe;
</script>
Analoge Uhr
Eine analoge Uhr mit Zeiger kann man programmieren, indem die Zeiger als Grafiken einbindet und diese dann mittels CSS Transform: rotate() zu drehen. Zuvor muss mittels CSS der Drehpunkt definiert und die Zeigerbilder positioniert sein.
Den jeiweiligen Drehwinkel kann man sich anhand der Date Methoden berechnen.
let datum = new Date();
let sekunde = 6*datum.getSeconds();
let minute = 6*datum.getMinutes();
let stunde = 30*(datum.getHours()+datum.getMinutes()/60);
Dann kann man den Drehwinkel dem jeweiligen Bild zuweisen.
document.getElementById("zeigerSek").style.transform = "rotate("+sekunde+"deg)" ;
