Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- JavaScript : Datum & Uhrzeit : Countdown -


Ein Countdown mit JavaScript, der Jahre, Monate, Tage, Stunden, Minuten und Sekunden bis zu einem beliebigen Zeitpunkt herunterzählt.
(Neue Version!)

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape 4.75, 6.1, 7.0 und 7.1, Mozilla 1.0, 1.21 und 1.4 sowie Opera 6.01, 7.01 und 7.23.

Wegen der unterschiedlichen Monats- und Jahreslängen ist ein Countdown mit nur Tagen, Stunden, Minuten und Sekunden zwar 'genauer', aber auch langweiliger und unübersichtlicher. (Wer kann z.B. schon auf den ersten Blick erkennen, wieviele Jahre und Monate in etwa 820 Tagen entsprechen.)

Ein kleines Problem bieten auch die verschiedenen Zählweisen: Zählt man zum Beispiel vom 25.03 zum 8.10 zunächst 6 volle Monate, erhält man rechnerisch den 25.09. Bis zum 08.10 sind es dann noch 5 Tage im September und 8 Tage im Oktober. Der Countdown steht damit bei 6 Monaten und 13 Tagen.
Zählt man andererseits erst die dazwischenliegenden 6 Monate (April-September) und addiert die restlichen Tage des Start- und des Ziel-Monats (6+8) steht der Countdown bei 6 Monaten und 14 Tagen.

Ich habe mich für die letztere (m.E. intuitivere) Variante entschieden. (Wer es anders sieht, rechne doch mal das vorstehende Beispiel mit dem 31.03 als Start-Datum durch.)


Demo:

Die Spannung steigt. Nur noch

bis zum 22.2.2222, 22:22:22 Uhr.


Der Quelltext:

<html>
  <head>
    <title>Datum-Countdown mit JavaScript</title>

    <script language="JavaScript">
      // Ziel-Datum in MEZ
      var jahr=2222, monat=2, tag=22, stunde=22, minute=22, sekunde=22;
      var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

      function countdown() {
        startDatum=new Date(); // Aktuelles Datum

        // Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
        if(startDatum<zielDatum)  {

          var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;

          // Jahre
          while(startDatum<zielDatum) {
            jahre++;
            startDatum.setFullYear(startDatum.getFullYear()+1);
          }
          startDatum.setFullYear(startDatum.getFullYear()-1);
          jahre--;

          // Monate
          while(startDatum<zielDatum) {
            monate++;
            startDatum.setMonth(startDatum.getMonth()+1);
          }
          startDatum.setMonth(startDatum.getMonth()-1);
          monate--;

          // Tage
          while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
            tage++;
            startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
          }

          // Stunden
          stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
          startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

          // Minuten
          minuten=Math.floor((zielDatum-startDatum)/(60*1000));
          startDatum.setTime(startDatum.getTime()+minuten*60*1000);

          // Sekunden
          sekunden=Math.floor((zielDatum-startDatum)/1000);

          // Anzeige formatieren
          (jahre!=1)?jahre=jahre+" Jahre,  ":jahre=jahre+" Jahr,  ";
          (monate!=1)?monate=monate+" Monate,  ":monate=monate+" Monat,  ";
          (tage!=1)?tage=tage+" Tage,  ":tage=tage+" Tag,  ";
          (stunden!=1)?stunden=stunden+" Stunden,  ":stunden=stunden+" Stunde,  ";
          (minuten!=1)?minuten=minuten+" Minuten  und  ":minuten=minuten+" Minute  und  ";
          if(sekunden<10) sekunden="0"+sekunden;
          (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

          document.countdownform.countdowninput.value=
              jahre+monate+tage+stunden+minuten+sekunden;

          setTimeout('countdown()',200);
        }
        // Anderenfalls alles auf Null setzen
        else document.countdownform.countdowninput.value=
            "0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
      }
    </script>
  </head>

  <body onload="countdown()">
    <form name="countdownform">
      <p>
        <input size="75" name="countdowninput">
      </p>
    </form>
  </body>

</html>

Damit die Anzeige nicht jede Minute hin und her wackelt, wird bei 9 bis 0 Sekunden eine 0 vorangestellt. Wer's perfekt, aber aufwendiger machen möchte, nimmt mehrere input-Boxen sowie eine Tabelle.

Die Zeitangabe richtet sich überings nach dem internen Chronometer Ihres Rechners. (siehe Taskleiste unten rechts)

Liegt das aktuelle Datum hinter dem Ziel-Datum, werden nur Nullen angezeigt. Die Zählung stoppt automatisch, wenn das angegebene Ziel-Datum überschritten wird.


Download  Countdown.zip (ca. 1 kb)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail