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.

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert auer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser fr Audio-Spuren in eine Html-Webseite einfgen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

berbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein ber belnd effect jedoch wrde ich diesen gerne einfgen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank fr das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. Mrz 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht