Aktuelles Datum anzeigen
Wochentag und aktuelles Datum in die HTML-Seite schreiben
Rubrik Datum
Die Darstellung der Datumsinformationen auf dunklem Hintergrund erfolgt hier automatisch, aber zeitverzögert, nach 2 und jeweils nach 2 weiteren Sekunden. Die drei andern Darstellungen erscheinen erst nach Interaktion. Jedes der drei Elemente ist an einen Button mit Klick-Funktion gebunden. Sie haben Zeit und können den Moment der Änderung selbst bestimmen.
Vorgaben für die Aufgabenstellung
Zur Darstelling des Datums in 3 Varianten sollen folgende Bedingungen erfüllt werden:- Das Systemdatum soll ausgelesen werden
- Dem Wert für den Wochentag soll die deutsche Bezeichnung zugeordnet werden
- Dem Wert für den Monat soll der deutsche Monatsname zugeordnet werden
- Die Tageszahl soll immer 2-stellig angezeigt werden
- Der Monat kann als Text oder 2-stellig angezeigt werden
- Der Jahreswert soll immer 4 stellig sein
Was geschieht im JavaScript
Zuerst wird das aktuelle Datum aus dem Systemdatum entnommen und in der Variablen 'DatumZeitJetzt' abgelegt.
const DatumZeitJetzt = new Date();
Ich erstelle also eine Kopie des Date-Objekts, mit dem ich arbeiten kann. Dieser Variablen "DatumZeitJetzt" entnehme ich später die benötigten Informationen.
Für die Textausgabe der Wochentage und der Monatsnamen wird jeweils ein Register angelegt. Die Tages- und Monatsbezeichnungen werden daraus generiert. Beispiel Array für die Wochentage:
const WochentageText = new Array('Sonntag','Montag', ... 'Samstag');
Die Entnahme erfolgt für den Wochentag mit der Methode getDay() (Tag der Woche), die eine Zahl zurückliefert.
WochentageText[DatumZeitJetzt.getDay()]
Wenn die ermittelte Zahl 0 ist, entnehme den ersten Wert aus dem Array WochentageText.
Ergebnis = Sonntag
Wenn die ermittelte Zahl 1 ist, entnehme den zweiten Wert aus dem Array WochentageText.
Ergebnis = Montag
Bei einstelliger Tageszahl soll eine Null vorangestellt werden. Das wird für die erste Ziffer der zweistelligen Darstellung mit einer simplen Abfrage geprüft:
... (DatumZeitJetzt.getDate()<10) ? "0" : "") ...
Wenn die Tageszahl kleiner 10 ist, setzt sich das Ergebnis aus dem Textstring "0" (Null) und der Tageszahl zusammen. Wenn nicht, setzt sich das Ergebnis aus dem Textstring "" (nichts) und der Tageszahl zusammen.
Die Möglichkeit zur Ermittlung der 4-stelligen Jahreszahl bietet die JavaScript-interne Funktion getFullYear() bei der, anders als mit getYear(), 4 Ziffern zurückgegeben werden.
JavaScript-Code-Schnipsel für dieses Modul
Für Web-Worker und Scriptschreiber: Mit JavaScript haben Sie Einfluss auf das im Browserfenster angezeigte HTML-Dokument und die Möglichkeit, auf Benutzeraktionen zu reagieren. Inhalte können abgefragt und die Darstellung der Seite kann verändert werden. Einige der in diesem Beispiel verwendeten Techniken zeige ich unten auf. Im Quelltext der Seite können sie den gesamten Zusammenhang erkennen.
Zeitdarstellung im Format "heute01" einblenden
// nach 2 Sekunden die Funktion "ZeigeDatum01()" aufrufen
const Timeout01 = setTimeout("ZeigeDatum01()", 2000);
function ZeigeDatum01() {
// Datum im Element mit de ID "AnzeigeBox01" anzeigen
document.getElementById('AnzeigeBox01').innerHTML = heute01;
}
Quellcode JavaScript + CSS
Ich verwende bei meinen Modulen eigene CSS-Klassen zur Positionierung und / oder Formatierung. Die CSS-Anweisungen werden im Head-Bereich notiert. Der JavaScript-Code für meine Lösungsvariante ist innerhalb einer JavaScript-Deklaration im Head-Bereich notiert oder in einer externen JS-Datei ausgelagert. Eine Textdatei mit dem Quellcode stelle ich, falls vorhanden, hier zum Download zur Verfügung.
Unten angekommen!
Diesmal nicht gefunden was sie suchten? Kommen sie doch später noch mal vorbei.
Kaffeepause
Impressum
Datenschutz
Webmaster
Sitemap
Übersicht mit Verweisen zu den Unterseiten die bereits überarbeitet wurden Sitemap
nach oben
vorherige Seite
Sitemap
Home
Keywords
Datum Date() new Date() getDay() getFullYear() Wochentag Anzeige onClick Datumswert Array Clock zeitverzögert setTimeout() CSS-Klassen JavaScript Script-Code Vorlagen Beispiel Modul