EvoComp - JavaScript Beispiel: Das Date Objekt - Umgang mit Datum und Zeit (Time)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>EvoComp - JavaScript Beispiel: Das Date Objekt - Umgang mit Datum und Zeit (Time)</title> <meta name="description" content="Beispiele zu Date in JavaScript - Objekt zur Speicherung und Konvertierung von Datums- und Zeitangaben (Time)" /> <meta name="keywords" lang="de" content="javascript date,javascript,date,beispiel,javascript datum,datum,timestamp" /> <meta name="language" content="de" /> <meta http-equiv="content-language" content="de" /> <meta name="robots" content="index,follow,noarchive" /> <meta name="date" content="2008-11-26"> <meta name="DC.Date" content="2008-11-26"> <base href="http://www.evocomp.de/beispiele/javascript/date.html"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Alexander Müller"> <meta name="DC.Creator" content="Alexander,Müller"> <meta name="DC.Publisher" content="Alexander,Müller"> <meta name="DC.Contributor" content="Alexander,Müller"> <meta name="DC.Type" content="Text"> <meta name="DC.Format" content="text/html"> <meta name="DC.Identifier" content="http://www.evocomp.de/"> <meta http-equiv="expires" content="0"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="/portal.css"> <script src="/portal.js" type="text/javascript"></script> <meta name="revisit-after" content="15 days"> <meta http-equiv="pragma" content="no-cache"> <meta name="audience" content="Alle"> </head> <body> <a id="top" name="top"><img class="transparent" border="0" name="icount" src="/pic/transparent.gif" alt=""></a> <script language="javascript" type="text/javascript">  </script> <a href="/" title=""><img class="logo" border="0" src="/pic/logo_evocomp.jpg" alt=""></a> <p class="banner"> <a href="http://www.kunstundreisen.de" rel="nofollow" title="" target="_blank"><img border="0" src="http://www.kunstundreisen.de/mehr/verlinkung/grafiken/kunstundreisen_468_60.gif" width="468" height="60" alt=""></a> <img border="0" src="/pic/ad.gif" alt=""> </p> <div id="container"> <ul id="topmenu"> <li><a href="/index.html" title="Startseite">Home</a></li> <li><a href="/sitemap.html" title="Seitenstruktur">Sitemap</a></li> <li><a href="/contact.html" title="Kontakt">Kontakt</a></li> <li><a href="/imprint.html" title="Impressum">Impressum</a></li> </ul> <div id="contentcontainer"> <div id="breadcrumb">Sie sind hier: <a href="/index.html" title="Startseite">Home</a> :: <a href="/beispiele/beispiele.html" title="Beispiele Script">Beispiele</a> :: <a href="/beispiele/javascript/javascripts.html" title="JScript / JavaScripts / JavaScript Beispiele">JavaScript</a> :: <a href="/beispiele/javascript/date.html" title="time Date Java Script time">Date</a> </div> <div id="sample"> <ul> <li>Beispiele</li> <li>Methoden</li> <li><a href="/beispiele/javascript/alert.html" title="java script alert javascript">» alert</a></li> <li><a href="/beispiele/javascript/back.html" title="window back javascript">» back</a></li> <li><a href="/beispiele/javascript/clearinterval.html" title="clearinterval javascript">» clearInterval</a></li> <li><a href="/beispiele/javascript/cleartimeout.html" title="cleartimeout javascript">» clearTimeout</a></li> <li><a href="/beispiele/javascript/window-close.html" title="javascript window close javascript">» close</a></li> <li><a href="/beispiele/javascript/confirm.html" title="window confirm javascript">» confirm</a></li> <li><a href="/beispiele/javascript/getelementbyid.html" title="document getelementbyid javascript">» getElementById</a></li> <li><a href="/beispiele/javascript/indexof.html" title="indexof javascript">» indexOf</a></li> <li><a href="/beispiele/javascript/window-open.html" title="javascript window open javascript">» open</a></li> <li><a href="/beispiele/javascript/print.html" title="window print javascript">» print</a></li> <li><a href="/beispiele/javascript/prompt.html" title="window prompt javascript">» prompt</a></li> <li><a href="/beispiele/javascript/reload.html" title="java script reload javascript">» reload</a></li> <li><a href="/beispiele/javascript/location-replace.html" title="java script replace javascript">» replace (Location)</a></li> <li><a href="/beispiele/javascript/setinterval.html" title="window setinterval javascript">» setInterval</a></li> <li><a href="/beispiele/javascript/settimeout.html" title="window settimeout javascript">» setTimeout</a></li> <li><a href="/beispiele/javascript/split.html" title="split javascript">» split</a></li> <li><a href="/beispiele/javascript/substring.html" title="substring javascript">» substring</a></li> <li><a href="/beispiele/javascript/write.html" title="document write javascript">» write</a></li> <li>Eigenschaften</li> <li><a href="/beispiele/javascript/location-href.html" title="location href javascript">» href (Location)</a></li> <li><a href="/beispiele/javascript/document-url.html" title="url javascript">» url</a></li> <li>Objekte</li> <li><a href="/beispiele/javascript/array.html" title="java script array javascript">» Array</a></li> <li><a href="/beispiele/javascript/date.html" title="javascript datum,zeit / time,date javascript">» Date</a></li> <li><a href="/beispiele/javascript/document.html" title="java script document javascript">» Document</a></li> <li><a href="/beispiele/javascript/event.html" title="event javascript">» Event</a></li> <li><a href="/beispiele/javascript/history.html" title="java script history javascript">» History</a></li> <li><a href="/beispiele/javascript/location.html" title="java script location javascript">» Location</a></li> <li><a href="/beispiele/javascript/string.html" title="java script string javascript">» String</a></li> <li><a href="/beispiele/javascript/style.html" title="CSS Style javascript">» Style (CSS)</a></li> <li><a href="/beispiele/javascript/window.html" title="java script window javascript">» Window</a></li> <li>Ereignisse (Events)</li> <li><a href="/beispiele/javascript/event-onclick.html" title="onclick javascript">» onclick</a></li> <li><a href="/beispiele/javascript/event-onload.html" title="onload javascript">» onload</a></li> <li><a href="/beispiele/javascript/event-onchange.html" title="onchange javascript">» onchange</a></li> <li>Sprache</li> <li><a href="/beispiele/javascript/for.html" title="for javascript">» for</a></li> <li><a href="/beispiele/javascript/for-in.html" title="for in javascript">» for in</a></li> <li><a href="/beispiele/javascript/for-each.html" title="for each javascript">» for each</a></li> <li><a href="/beispiele/javascript/function.html" title="function javascript">» function</a></li> <li><a href="/beispiele/javascript/if.html" title="if javascript">» if</a></li> <li><a href="/beispiele/javascript/switch.html" title="switch javascript">» switch</a></li> <li><a href="/beispiele/javascript/while.html" title="while javascript">» while</a></li> <li><a href="/beispiele/javascript/do-while.html" title="do while javascript">» do ... while</a></li> <li><a href="/beispiele/javascript/variable.html" title="variable javascript">» Variable</a></li> <li><a href="/beispiele/javascript/try-catch.html" title="try javascript">» try (Exceptions)</a></li> <li>Ajax</li> <li><a href="/beispiele/javascript/ajax.html" title="ajax javascript">» Ajax</a></li> <li>Sonstiges</li> <li><a href="/beispiele/javascript/bilder.html" title="bilder javascript">» Bilder</a></li> <li><a href="/beispiele/javascript/browser.html" title="browser javascript">» Browser</a></li> <li><a href="/beispiele/javascript/checkbox.html" title="checkbox javascript">» Checkbox</a></li> <li><a href="/beispiele/javascript/cookies.html" title="cookies javascript">» Cookies</a></li> <li><a href="/beispiele/javascript/countdown.html" title="countdown javascript">» Countdown</a></li> <li><a href="/beispiele/javascript/cursor.html" title="cursor javascript">» Cursor</a></li> <li><a href="/beispiele/javascript/div.html" title="div javascript">» DIV</a></li> <li><a href="/beispiele/javascript/dom.html" title="dom javascript">» DOM</a></li> <li><a href="/beispiele/javascript/fenster.html" title="html fenster javascript">» Fenster</a></li> <li><a href="/beispiele/javascript/form.html" title="form javascript">» Form</a></li> <li><a href="/beispiele/javascript/html.html" title="html javascript">» HTML</a></li> <li><a href="/beispiele/javascript/popup.html" title="popup javascript">» PopUp</a></li> <li><a href="/beispiele/javascript/redirect.html" title="redirect javascript">» redirect</a></li> <li><a href="/beispiele/javascript/submit.html" title="submit javascript">» submit</a></li> <li><a href="/beispiele/javascript/textarea.html" title="textarea javascript">» Textarea</a></li> <li><a href="/beispiele/javascript/trim.html" title="string trim javascript">» trim String</a></li> <li><a href="/beispiele/javascript/void.html" title="void javascript">» void</a></li> <li><a href="/beispiele/javascript/xml.html" title="xml javascript">» XML</a></li> </ul> </div> <h1 class="notopmargin">JavaScript Date Objekt</h1> <p class="norm"> Das <strong>Date-Objekt</strong> dient der Speicherung von Datum- und Zeitangaben. Darüber hinaus stellt das Date-Objekt <strong>Methoden</strong> zur Umwandlung der gespeicherten Datum- und Zeitangaben in eine Zeichenkette (<a href="/beispiele/javascript/string.html" title="String Java Script">string</a>) zur Verfügung. Mit Hilfe von <strong>Date</strong> lassen sich eine ganze Reihe von einfachen Effekten in eine <strong>Internetseite</strong> einbauen. Es lassen sich gar – wenn auch in begrenztem Maße – dynamische Inhalte erzeugen. Auf diese Weise läßt sich auch eine statische Internetseite ein wenig interessanter gestalten. </p> <h2>JavaScript Date Beispiel 1: Initialisierung eines Date-Objekts mit dem aktuellen Datum und der aktuellen Zeit</h2> <p class="norm"> Das erste Beispiel zeigt, wie man das aktuelle <strong>Datum</strong> sowie die aktuelle <strong>Zeit</strong> ausgeben kann. Zu diesem Zweck wird zunächst eine Instanz des <strong>Datum-Objekts</strong> erzeugt und der Variablen d zugewiesen. Übergibt man, wie im vorliegenden Fall, bei der Erzeugung eines Datum-Objekts keine Parameter, so werden der Instanz das aktuelle Datum, wie auch die aktuelle <strong>Uhrzeit</strong> zugewiesen. In diesem Falle wird der Default-Constructor aufgerufen, welcher dies automatisch erledigt. Danach werden die einzelnen Komponenten der Uhrzeit mit führenden Nullen aufgefüllt und in String-Variablen (h, m, s für Stunden-, Minuten-, Sekundenkomponente) gespeichert, was lediglich der besseren Lesbarkeit dient. </p> <p class="norm"> Als nächstes werden <strong>Arrays</strong> mit den Namen der Wochentage und der Monate definiert. Da die Methoden getDay() und getMonth() nur den Index des jeweiligen Tages (0 = Sonntag .. 6 = Samstag) bzw. des entsprechenden Monats (0 = Januar .. 11 = Dezember) liefern, ist eine Übersetzung in ein verständliches <strong>Format</strong> nötig. Die <a href="/beispiele/javascript/array.html" title="array java script">Arrays</a> spiegeln diese Zuordnungen wieder, indem der jeweilige Zugriffsindex den entsprechenden <strong>Tag</strong> bzw. <strong>Monat</strong> als Zeichenkette enthält. Zum Schluß werden die einzelnen Komponenten mit der <strong>Methode</strong> <a href="/beispiele/javascript/write.html" title="javascript document">write</a> des <a href="/beispiele/javascript/document.html" title="document java script">Document Objekts</a> ausgegeben. </p> <p class="code2"> <script language="javascript" type="text/javascript"><br> <br> </script><br> </p> <p class="sample2"> <script language="javascript" type="text/javascript">  </script> </p> <h2>Date in JavaScript Beispiel 2: Initialisierung mit einem festgelegten Datum/Zeit</h2> <p class="norm"> Es gibt mehrere Möglichkeiten ein <strong>Datum-Objekt</strong> zu initialisieren. Im Folgenden Code-Abschnitt werden die unterschiedlichen Varianten der Initialisierung vorgestellt. Das Ergebnis der jeweiligen Variante können Sie durch einen Klick auf den jeweiligen Link in einem Meldungsfenster, welches mit der <a href="/beispiele/javascript/alert.html" title="alert java script">Alert Methode</a> (gehört zum <a href="/beispiele/javascript/window.html" title="window javascript">Window-Objekt</a>) geöffnet wird, kontrollieren. </p> <p class="norm"> Bei der ersten Variante wird nur das Datum übergeben (Parameterreihenfolge: Jahr, Monat, Tag). Hier wird die Uhrzeit automatisch auf Mitternacht des angegebenen Datums gesetzt. Beachten Sie bitte, dass die Monatsangabe auch hier mit 0 (für den Januar) beginnt. Die zweite Variante setzt gleich das Datum und die Uhrzeit auf den vorgegebenen Wert (Reihenfolge der Parameter: Jahr, Monat, Tag, Stunde, Minute, Sekunde). </p> <p class="norm"> Der dritte Fall setzt das Datum relativ zum 01.01.1970 als Timestamp. Hier wird die verstrichene <strong>Zeit</strong> – in <strong>Millisekunden</strong> – seit diesem Datum angegeben. </p> <p class="norm"> Mit der letzten Variante kann das Date-Objekt durch eine Zeichenkette initialisiert werden. Das String wird in englischer Schreibweise angegeben. Dabei wird der Monat entweder in der Kurzform oder ausgeschrieben angegeben (z.B. Mar oder auch March). Auf Groß- und Kleinschreibung muss nicht geachtet werden. </p> <p class="code2"> Nur Datum festgelegt: <a href="javascript:alert (new Date (1956, 7 ,8))">Geburtstag von Willi</a><br><br> Datum und Uhrzeit festgelegt: <a href="javascript:alert (new Date (2006, 10, 11, 11, 11, 11))">Weiberfastnacht 2006</a><br><br> Relativ zum 01.01.1970: <a href="javascript:alert ('1 Jahr nach Beginn des Computerzeitalters:\n' + new Date (365*24*60*60*1000) + '\n(Lokale Zeitangabe)')">1 Jahr Computerzeitalter</a><br><br> Mit einem String: <a href="javascript:alert (new Date ('mar 12, 2006 14:30:00'))">Datum mit Zeichenkette</a><br> </p> <p class="sample2"> Nur Datum festgelegt: <a href="javascript:alert (new Date (1956, 7 ,8))">Geburtstag von Willi</a><br> Datum und Uhrzeit festgelegt: <a href="javascript:alert (new Date (2006, 10, 11, 11, 11, 11))">Weiberfastnacht 2006</a><br> Relativ zum 01.01.1970: <a href="javascript:alert ('1 Jahr nach Beginn des Computerzeitalters:\n' + new Date (365*24*60*60*1000) + '\n(Lokale Zeitangabe)')">1 Jahr Computerzeitalter</a><br> Mit einem String: <a href="javascript:alert (new Date ('mar 12, 2006 14:30:00'))">Datum mit Zeichenkette</a> </p> <h2>JavaScript Date/Time Beispiel 3: Änderung eines Datum-Objekts</h2> <p class="norm"> Das folgende Beispiel zeigt, wie ein bereits initialisiertes Datum nachträglich geändert werden kann. Nach der Initialisierung des Datum-Objekts mit den aktuellen Datums- und Zeitwerten wird mit Hilfe der Methode <strong>setTime()</strong> der Folgetag gesetzt. Dies geschieht durch Addition der entsprechenden Anzahl von Millisekunden (24 Stunden * 60 Minuten * 60 Sekunden * 1000 um auf Millisekunden zu kommen), die innerhalb eines Tages auflaufen, mit der durch <strong>getTime()</strong> ermittelten Anzahl der Millisekunden, die seit 01.01.1970 vergangen sind. Damit enthält das Datum-Objekt nun den Folgetag zur selben Uhrzeit. SetTime und getTime setzen bzw. lesen den intern in Date gespeicherten Timestamp, der das Datum und die zugehörige Zeit definiert und die verstrichene Zeit seit dem 1.1.1970 darstellt. Am Ende wird das so gesetzte Datum entsprechend formatiert ausgegeben. </p> <p class="code2"> <script language="javascript" type="text/javascript"><br> <br> </script><br> </p> <p class="sample2"> <script language="javascript" type="text/javascript">  </script> </p> <p class="navbottom"> <span class="next"><a href="/beispiele/javascript/date-2.html" title="datum javascript datum">weiter zu Seite 2 »</a></span> </p> </div> <div id="left"> <div class="containerblock"> <p class="title">¬ Menu</p> <ul class="content"> <li><a href="/themen/evolutionsalgorithmen/evoalg.html" title="Evolutionäre Algorithmen">» Evolutionsalgorithmen</a></li> <li><a href="/softwareentwicklung/software-entwicklung.html" title="Software-Entwicklung">» Softwareentwicklung</a></li> <li><a href="/tutorials/tutorial.html" title="Tutorials / Tutorien">» Tutorials</a></li> <li><a href="/scripts/skripte.html" title="Free Scripts / Gratis Skripte Download">» Scriptarchiv</a></li> <li><a href="/beispiele/beispiele.html" title="Beispiele Scripts">» Beispiele</a></li> <li><a href="/beispiele/javascript/javascripts.html" title="JavaScripts / JavaScript Beispiel">    » JavaScript</a></li> <li><a href="/beispiele/php/php.html" title="PHP Script">    » PHP</a></li> <li><a href="http://forum.evocomp.de/" target="_blank" title="Forum Webentwicklung / Webprogrammierung">» Forum</a></li> <li><a href="/historie/historie.html" title="Historie">» Historie</a></li> <li><a href="/glossar/glossar.html" title="Glossar">» Glossar</a></li> <li><a href="/links/links.html" title="Links">» Links</a></li> <li><a href="/literatur/literatur.html" title="Literatur">» Literatur</a></li> <li><a href="/visitenkarte/index.html" title="Visitenkarte" target="_blank">» Visitenkarte</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Gratis Download</p> <ul class="content"> <li><a href="/scripts/java-script-download/java-script-galerie/javascript-galerie.html" title="html bildergalerie">Web Galerie</a></li> <li><a href="/scripts/php-scripts-download/php-bilder-galerie/php-photo-galerie.html" title="dynamische bildergalerie">PHP Bildergalerie</a></li> <li><a href="/scripts/php-scripts-download/php-counter-class/php-counter-script.html" title="homepage counter">Besucherzähler</a></li> <li><a href="/scripts/java-script-download/java-script-fontsize/javascript-fontsize.html" title="schriftgröße html">Schriftgröße</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Seminare</p> <ul class="content"> <li><a href="/beispiele/javascript/seminar-schulung-kurs-lernen.html" title="JavaScript lernen">JavaScript Kurs</a></li> <li><a href="/beispiele/php/lernen-kurs-schulung-seminar.html" title="PHP lernen">PHP Kurs</a></li> </ul> </div> <br/><br/> <div class="containerblock"> <p class="title">¬ Yoga</p> <ul class="content"> <li><a href="/yoga/deutschland/yoga-koeln.html" title="Yoga in Köln">Yoga Köln</a></li> <li><a href="/yoga/hatha-yoga.html" title="Hatha Yoga Köln">Hatha Yoga</a></li> <li><a href="/yoga/buecher/yoga-buch.html" title="Yoga Buch">Yoga Bücher</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Insolvenzrecht</p> <ul class="content"> <li><a href="/insolvenz/insolvenzrecht-buch.html" title="Insolvenzrecht Buch">Literatur Insolvenzrecht</a></li> </ul> </div> </div> <div id="right"> <div class="containerblock"> <p class="title">¬ News</p> <p class="content"> <span class="latest_news_date">15.08.2008</span><span class="latest_news">Schleifen in PHP: Die While-Schleife <a href="/news/15_08_2008.html" title="Meldung vom 15.08.2008">» mehr</a></span> <span class="latest_news_date">13.08.2008</span><span class="latest_news">Nutzung von Variablen unter PHP: Definition, Sichtbarkeit und vordefinierte Variablen <a href="/news/13_08_2008.html" title="Meldung vom 13.08.2008">» mehr</a></span> <span class="latest_news_date">11.08.2008</span><span class="latest_news">Ausgabe von Datum und Zeit mit PHP nach Konvertierung in ein String <a href="/news/11_08_2008.html" title="Meldung vom 11.08.2008">» mehr</a></span> <span class="news_liste_hinweis">Eine vollständige News-Liste ist auf der <a href="/news/news.html" title="News Seite">News-Seite</a> zugänglich.</span> </p> </div> <div class="containerblock"> <p class="title">¬ Foren</p> <ul class="content"> <li> <div style="display:inline;float:right;width:130px;"> <a href="http://forum.evocomp.de/f7/" target="_blank" title="JavaScript Hilfe">JavaScript Forum</a><br> <a href="http://forum.evocomp.de/f8/" target="_blank" title="PHP Hilfe">PHP Forum</a><br> </div> <img width="48" height="48" src="/pic/forum_icon.gif" alt="Foren" /> </li> </ul> </div> <div class="containerblock"> <p class="title">¬ Buchtipp</p> <p class="content"> <span class="book"><a href="http://ad.zanox.com/ppc/?5685652C554664482T&ULP=[[22508213]]" rel="nofollow" title="" target="_blank"><img border="0" src="http://bilder.buecher.de/produkte/22/22508/22508213k.jpg" alt="" /><br />JavaScript kurz & gut</a><br /></span> <span class="book"><hr /> Weitere JavaScript Literaturtipps finden Sie unter <a href="/beispiele/javascript/buecher.html" title="">JavaScript Bücher</a> </span> </p> </div> </div> </div> <div id="copyright"> <script language="javascript" type="text/javascript">  </script> <noscript> © 2004-2025 Alexander Müller<br> <a href="http://call-center.evocomp.de" title="">Call Center Central</a> </noscript> <br><a href="http://www.EvoComp.de" title="Homepage von www.EvoComp.de">www.EvoComp.de</a><br> Letzte Änderung: 26.11.2008 <p> <img border="0" src="/pic/valid-html4.01.png" width="80" height="15" alt="Valid HTML 4.01!" title="Valid HTML 4.01!">      <img border="0" src="/pic/valid-css.png" width="80" height="15" alt="Valid CSS!" title="Valid CSS!"> <br><br> <a href="http://www.gadgets4web.net/service/web-design.html" title="erstellen Internetseite, Köln">Webdesign</a> • <a href="http://www.gadgets4web.net/service/beratung.html" title="Internetseiten, Köln">Beratung Internetseite</a> • <a href="http://www.gadgets4web.net/service/web-entwicklung.html" title="Internetseite programmieren, Köln">Programmierung Internetseite</a> </p> </div> </body> </html>

CINXE.COM

EvoComp - JavaScript Beispiel: Das Date Objekt - Umgang mit Datum und Zeit (Time)