JavaScript Date Beispiel 4: Konvertierung in eine Zeichenkette

Im nächsten Beispiel werden die vom Date-Objekt vorgegebenen Konvertierungsmethoden demonstriert. Es gibt zwei unterschiedliche Methoden zur Konvertierung von Datum-Objekten in eine Zeichenkette. Die Methode toLocaleString() liefert das angegebene Datum im lokalen, vom Betriebssystem vorgegebenen, Format zurück. Im Gegensatz dazu liefert die Methode toGMTString() das Datum nach UTC (GMT – Greenwich Mean Time) zurück. Zu beachten ist hier, dass dieses Format nicht zwischen Sommer- und Winterzeit unterscheidet.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Instanz von Datum-Objekt per Default-Konstruktor
  // erzeugen (mit aktueller Zeit initialisieren)
  d = new Date ();
  document.write ('Lokale Format: ' + d.toLocaleString () + '<br>' +
                  'Im IETF-Standard: ' + d.toGMTString ());
// -->
</script>

JavaScript Date Beispiel 5: Countdown

Das nächste Beispiel implementiert einen Countdown, der die Zeit bis Mitternacht berechnet und diese Zeitspanne dann per document.write ausgibt. Dies geschieht, indem das aktuelle Datum und die aktuelle Zeit durch das Erzeugen einer Instanz von Date, ermittelt wird. Danach wird mit d2 eine Kopie der Instanz d erzeugt. Beachten Sie bitte, dass ein einfaches Kopieren des Datums (der Form d2 = d) durch eine Zuweisung nicht möglich ist, da der Zuweisungsoperator d2 keine Kopie, sondern eine Referenz zuweisen würde. Aus diesem Grund ist die Nutzung des Copy-Constructors nötig, der eine neue Instanz d2 mit den Daten der Vorlage d erzeugt. Wird nur eine Referenz zugewiesen, so werden alle folgenden Änderungen an d2 an der Ursprungs-Instanz durchgeführt, da nur eine Instanz existiert.

Nun wird mit der Methode setTime() der Folgetag zugewiesen, indem zur aktuellen Date-Instanz 24 Stunden addiert werden. Als nächstes wird die Zeitkomponente der Kopie auf Mitternacht gesetzt, da nur die Zeit bis Mitternacht berechnet werden soll und nicht die Zeit bis zur gleichen Uhrzeit des Folgetages. Jetzt werden die einzelnen Komponenten (Stunden, Minuten und Sekunden) bis Mitternacht berechnet. Zuletzt werden die Komponenten – auch hier der Lesbarkeit halber – ggf. wieder mit führenden Nullen aufgefüllt und die berechneten Zeitkomponenten werden ausgegeben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Instanz von Datum-Objekt per Default-Konstruktor
  // erzeugen (mit aktueller Zeit initialisieren)
  d = new Date ();
  // Kopie des aktuellen Datums erzeugen (Copy-Constructor)
  d2 = new Date (d);
  // Auf nächsten Tag um die selbe Zeit setzen
  d2.setTime (d2.getTime () + 24 * 60 * 60 * 1000);
  // Auf Mitternacht des Folgetages setzen
  d2.setHours (0);
  d2.setMinutes (0);
  d2.setSeconds (0);
  // Zeit bis Mitternacht in Sekunden
  ds = (d2.getTime () - d.getTime ()) / 1000;
  // Anzahl der Stunden bis Mitternacht berechnen
  h = Math.floor (ds / (60 * 60));
  // Anzahl der Minuten bis Mitternacht berechnen
  m = Math.floor (ds % (60 * 60) / 60);
  // Anzahl der Sekunden bis Mitternacht berechnen
  s = ds % 60;
  // mit führender 0 auffüllen, wenn Stunden, Minuten
  // oder Sekunden kleiner 10 sind
  h = (h < 10 ? '0' + h : h);
  m = (m < 10 ? '0' + m : m);
  s = (s < 10 ? '0' + s : s);
  // Countdown ausgeben
  document.write ('Noch ' + h + ' Stunden, ' + m +
          ' Minuten und ' + s + ' Sekunden bis Mitternacht!');
// -->
</script>

JavaScript Date Beispiel 6: Passende Begrüßung

Mit dem folgenden Beispiel können Sie Ihre Seitenbesucher stets mit der passenden Begrüßung empfangen. Dazu wird der Stunden-Anteil der aktuellen Uhrzeit ausgelesen und eine dieser Zeit entsprechende Meldung ausgegeben. Auf diese Weise kann auch zu einem bestimmten Datum eine entsprechende Meldung ausgegeben werden. Denkbar sind beispielsweise Geburtstage, sonstige Jubileen und Sprüche oder Bilder, die von Tag zu Tag wechseln.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Instanz von Datum-Objekt per Default-Konstruktor
  // erzeugen (mit aktueller Zeit initialisieren)
  d = new Date ();
  if (d.getHours () < 13)
      meldung = 'Guten Morgen!';
  else if (d.getHours () < 18)
      meldung = 'Guten Tag!';
  else
      meldung = 'Guten Abend!';
  document.write (meldung);
// -->
</script>

JavaScript Date Beispiel 7: Bannerrotation oder zeitgesteuerte Darstellung von Bildern

Das letzte Beispiel zeigt, wie eine einfache Bannerrotation mit JavaScript realisiert werden kann. Hier wird die Sekunden-Komponente der aktuellen Uhrzeit dazu verwendet den darzustellenden Banner und den zugehörigen Link auszuwählen. Diese Auswahl wird durch die Modulo-Operation (wird mit dem Operator % durchgeführt) getroffen, welche den Restwert der ganzzahligen Division liefert. Für das vorliegende Beispiel muss der Teiler 3 gewählt werden, da es drei mögliche Banner-Link-Kombinationen gibt. Die Operation kann damit nur die Ergebnisse 0 – Sekunden-Komponente ist ohne Rest durch drei teilbar –, 1 oder 2 liefern. Der Teiler muss also stets gleich der Anzahl von Kombinationsmöglichkeiten sein.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Instanz von Datum-Objekt per Default-Konstruktor
  // erzeugen (mit aktueller Zeit initialisieren)
  d = new Date ();
  // Link und URL des Banners definieren
  switch (d.getSeconds () % 3) {
      case 0: link = 'http:\/\/www.evocomp.de';
              imgfile = 'pic/banner-partner-a.gif';
              break;
      case 1: link = 'http:\/\/www.gadgets4web.net';
              imgfile = 'pic/banner-partner-b.gif';
              break;
      case 2: link = 'http:\/\/www.dev-resource.net';
              imgfile = 'pic/banner-partner-c.gif';
              break;
  }
  // Ausgabe der Link-Banner-Kombination
  document.write ('<a href=\"' + link + '\"><img src=\"' +
                  imgfile + '\"><\/a>');
// -->
</script>

Weitere Beispiele, welche mit dem Datum-Objekt arbeiten, finden Sie unter setInterval.

« zurück zu Seite 1