IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - JavaScript: Datum und Uhrzeit benutzen



JavaScript: Datum und Uhrzeit benutzen

Eine nette Option von JavaScript ist es, anhand vom Datum und der Uhrzeit eine Seite an zu passen. Ein kleines Tutorial, nach welchem Sie Ihre Fantasie den freien Lauf gehen lassen können.


Autor: Patrick Faes (dreamer)
Datum: 01-01-2004, 23:50:44
Referenzen: keine
Schwierigkeit: Anfänger
Ansichten: 55721x
Rating: 8 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Das Datum Object

Um dieses Objekt nutzen zu können, müssen Sie erst eine Instance davon machen. Nein, keine Instant Noodles! Man muss JavaScript nur sagen das es dieses Objekt aktivieren soll:

var MeinDatum = new Date(); Wenn Sie eine Instance vom Datum Object machen wollen, müssen Sie das Wort new benutzen, gefolgt durch das Objekt name(). Hier ist eine Liste der Datum Objekte:
  • getDate(): gibt an welcher Tag des Monats es ist (z.B. der Dritte)
  • getDay(): gibt den Names des Tages an (z.B. Montag)
  • getHours(): zeigt die Stunde an (von 0 bis 23 !!!)
  • getMinutes(): zeigt die Anzahl von Minuten an
  • getSeconds(): zeigt die Anzahl von Sekunden an
  • getMonth(): gibt an welchen Monat es ist (von 0 bis 11!!!)
  • getYear(): zeigt das Jahr an
  • getTime(): zeigt die Komplette Uhrzeit an
OK, sagen wir mal, dass wir das heutige Datum anzeigen möchten:


<script type="text/javascript">
var heute = new Date();
var jahr = heute.getYear();
var monat = heute.getMonth()+1;
var tag = heute.getDate();
document.write("Heute ist: "+tag+"/"+monat+"/"+jahr);
</script>


Anmerkung: Dieser Code kann man egal wo im Body schreiben. Übrigens sehen Sie, dass beim Monat einen dazu gezählt wird. Darauf komme ich später noch züruck.

Wenn Sie Javascript aktiviert haben, dann können Sie die Zeile sehen:

"heute ist:##/##/####".

Im Code wird erst Variable heute definiert. Er ist gleich die globale Variable new Date(). Danach werden Variablen Jahr Monat Tag daraus extrahiert. Man schreibt dazu Namen_des_Variablen.Funktion. Diese Funktionen sind jeweils getYear() getMonth() getDate(). Es gilt die Schriftgrößen zu beachten!
Anschließend werden die einzelnen Variablen zusammen geschrieben. Das geht so:

document.write ( " Heute ist: " + Tag + " / " + Monat + " / " + Jahr + " ) ;

Der Text der zwischen doppelten Anführungszeichen steht, wird auf dem Bilschirm gezeigt. Mit die Pluszeichen verbindet man Text und Variablen, deren Name nicht zwischen Anführungszeichen stehen darf.

Eine Uhr bauen
  • Eine Auflistung der Uhr/Datum-Objekten:
  • getDate
  • getDay
  • getHours
  • getMinutes
  • getMonth
  • getSeconds
  • getTime
  • getTimezoneOffset
  • getYear
  • parse
  • setDate
  • setHours
  • setMinutes
  • setMonth
  • setSeconds
  • setTime
  • setYear
  • toGMTString
  • toLocaleString
  • toString
  • UTC
  • valueOf
Die meisten werden wir hier nicht benutzen, wenn Sie aber mehr darüber wissen möchten, dann klicken Sie hier.

Nun werden wir also eine Uhr bauen. Wir benutzen dafür getHours() getMinutes() getSeconds() .


<form name="uhr">
<input type="text" size="7" name="digital">
</form>
<script type="text/javascript"> function zeit() { var uhrzeit = new Date(); var stunde = uhrzeit.getHours(); var minute = uhrzeit.getMinutes(); var sekunde = uhrzeit.getSeconds(); document.uhr.digital.write(stunde + ":" + minute + ";" + sekunde); setTimeout("zeit()",1000); } zeit(); </script>
Hier wird zuerst die Funktion zeit() definiert, die danach mit setTimeout jede Sekunde neu ausgeführt wird, um so eine Uhr zu Stande bringen zu können (auf die Funktion setTimeout komme ich später noch zurück). Die Zeit wird jedesmal in ein Formular geschrieben. Dies muss unbedingt vor dem Script definiert werden und im Script muss danach verwiesen werden!

Erweiterungen

Da wir hier schon eine Uhr gebaut haben, können wir diese auch erweitern. So kann man auch das Datum schreiben, nur sollte man darauf achten dass in Javascript Januar der nullte Monat ist und Dezember der elfte. Um dieses Manko zu berichten, kann man die Variable erhöhen.


var datum = new Date();
var monat = datum.getMonth();
var richtiger_monat = {monat + 1;}

Die Uhrzeit zählt die Stunden von 0 bis 23. Wenn es also Mitternacht ist, steht da z.B. 0:47 und nicht 24:47. Wenn Sie die zweite Variante bevorzugen, dann machen Sie das so:


var uhrzeit = getTime();
var stunde = uhrzeit.getHours();
if (stunde == 0) {stunde = 24;}

Hierbei wird zuerst die Variable stunde einen Wert vergeben, nämlich den der aktuellen Uhrzeit. Danach wird, wenn der Wert null ist (beachte das doppelte =-Zeichen!), den Wert verändert in 24.

In Javascript werden die Stunden immer angezeigt von 0 bis 23, man kann dies aber auch ändern in eine Anzeige von 0 bis 12. Das macht man so:


var uhrzeit = new Date();
var stunde = uhrzeit.getHours();
var minute = uhrzeit.getMinutes();
if (stunde > 12) {tageshaelfte =" am Nachmittag";}
if (stunde < 12) {tageshaelfte =" am Vormittag";}
if (stunde > 12) {stunde = stunde - 12;}
document.write("Sie sind hier angekommen um " + stunde + ":" + minute + tageshaelfte);

Wenn stunde kleiner ist als zwölf, ist noch Vormittag, ansonsten ist es Nachmittag. Die Reihenfolge spielt eigentlich keine Rolle, und man hätte dies auch realisieren können mittels if () else. In der Praxis würde die Auswirkung etwa so aussehen:



Befehle Zeit-gesteuert ausführen

So jetzt erkläre ich nochmal wie man Befehle in JavaScript an eine bestimmte Uhrzeit ausführen lassen kann. Ein Beispiel:


var uhrzeit = new Date();
var stunde = uhrzeit.getHours();
var minute = uhrzeit.getMinutes();
if ((stunde == 22) && (minute == 17)) {alert("Es ist jetzt 22:17 Uhr!")};

Um nach zu sehen ob es 22:17 Uhr ist, werden die Stunden und die Minuten einzeln getestet. Wenn dies so ist, erscheint eine Alert-Box.

Man kann auch die Hintergrundfarbe ändern wenn es z.B. nach fünf Uhr ist.


var uhrzeit = new Date();
var stunde = uhrzeit.getHours();
if (stunde > 17) {document.bgcolor = "yellow"};


Dan gibt es noch die Funktionen setTimeout und setInterval. Der erste haben wir schon benutzt. SetTimeout bewirkt dass eine Funktion verlangsamt ausgeführt wird. SetInterval ist gleich, bis auf dem Unterschied dass die Funktion in regelmäßigen Abständen wiederholt wird.

Die Syntax ist fast identisch:


setTimeout("name_der_funktion()",5000);
setInterval("name_der_funktion()",5000);
Beim ersten wird die Funktion nach 5 Sekunden ausgeführt (Notation in Tausendstel Sekunden). Bei setInterval dagegen wird die Funktion jede fünf Sekunden ausgeführt.

Monaten werden immer in Zahlen angegeben, man kann diese aber manuell ändern:


if (monat == 0) monat = Januar;
if (monat == 1) monat = Februar;
if (monat == 2) monat = März;
usw.

Eventuell kan man als zweites die Spracheinstellung des Browsers abfragen und die Variable ein Wert in verschieden Sprachen geben.

Jetzt haben Sie das Wichtigste gesehen und können nun selbst Programmieren. Wenn Sie doch noch mal eine Frage haben, bitte ich zum Forum oder zum Stöbern im Internet. Ich kann Ihnen da SelfHTML empfehlen.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04511
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06248
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1158
Comments: 0