Anthony DiNozzo: Counter mit mehreren "Ziel-Date"s

Moin moin liebe SelfHTML-Comunity,

ich möchte auf meiner Website gerne einen Counter einrichten, dafür habe ich auch schon einen Code (siehe unten). So weit so gut, doch ich habe unterschiedliche Ziel-Dates;
Mein Counter soll nicht auf EIN Datum im Jahr gerichtet sein sondern auf mehrere in verschiedenen Monaten, nämlich immer dann wenn Vollmond ist (die Uhrzeit ist mir egal es geht nur um das Datum).

Quellcode für bestimmtes datum im jahr:

  
      // 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";  
      }  

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

Wie soll ich diesen Code jetzt umwandeln?

Mit freundlichen Grüßen
Thony

  1. Hi,
    ich bins nochmal ich formuliere die Frage mal um:

    Wie kriege ich in folgenden Code ein zweites Datum rein???

      
          var jahr=2011, monat=2, tag=24, stunde=00;  
          var zielDatum=new Date(jahr,monat-1,tag,stunde);  
      
          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;  
      
              // 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);  
      
              // 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";  
      
              document.countdownform.countdowninput.value=  
                  jahre+monate+tage+stunden;  
      
              setTimeout('countdown()',200);  
            }  
            // Anderenfalls alles auf Null setzen  
            else document.countdownform.countdowninput.value=  
                "0 Jahre,  0 Monate,  0 Tage,  0 Stunden";  
          }  
    
    
    1. Wie kriege ich in folgenden Code ein zweites Datum rein???

      Ganz einfach. Ruf die Funktion mit dem Datum als Parameter aus und bau die Funktion so um, dass sie das übergebene Datum nutzt. Globale Variablen sind eh nicht optimal und hier völlig unnötig.

      1. Ganz einfach.

        klingt gut

        Ruf die Funktion mit dem Datum als Parameter aus

        ab hier nicht mehr wirklich - wie geht das?

        und bau die Funktion so um, dass sie das übergebene Datum nutzt.

        Nochmal die selbe Frage: Wie geht das?

        Jetzt hab ich zumindest mal einen Anfang auch wenn ich damit nicht viel anfangen kann :P

        trotzdem Danke
        Thony

        1. Ruf die Funktion mit dem Datum als Parameter aus
          ab hier nicht mehr wirklich - wie geht das?

          und bau die Funktion so um, dass sie das übergebene Datum nutzt.
          Nochmal die selbe Frage: Wie geht das?

          Lies dir mal das Kapitel über Javascript bei Selfhtml durch. Ist eine einfache Grundlage bei Funktionen. Es bringt dir auf Dauer nicht wirklich was, wenn ich dir die Lösung einfach so poste, auch wenns nur ne kleine Veränderung ist.

          1. Lies dir mal das Kapitel über Javascript bei Selfhtml durch. Ist eine einfache Grundlage bei Funktionen. Es bringt dir auf Dauer nicht wirklich was, wenn ich dir die Lösung einfach so poste, auch wenns nur ne kleine Veränderung ist.

            danke herr lehrer
            wollte ja auch nicht (unbedingt) das mir einer die fertige lösung serviert, hätt mir nur nen link zu dem bereich des JS-Kapitels gewünscht den i8ch brauche damit ich nich ne ewigkeit am suchen bin

            trotzdem danke

            Thony

            1. http://de.selfhtml.org/javascript/sprache/funktionen.htm

              Ich hab dir gesagt, es handelt sich um eine Funktion, da hättest du maximal 2 Minuten gesucht. Hat sicher länger gedauert, zu posten ...

  2. Lieber Anthony,

    Dein Script umzubauen bedeutet, Dein Script zu verstehen. Das ist jetzt vielleicht viel verlangt, aber das hier ist ja auch das SELFHTML-Forum, bei dem SELF vorausgesetzt wird.

    Um Dein Verständnis von JavaScript zu fördern, schlage ich vor, Du beschäftigst Dich mit <http://de.selfhtml.org/javascript/sprache/funktionen.htm@title=Funktionen in JavaScript>. Dort steht z.B. auch, dass man einer Funktion Parameter übergeben kann, mit denen diese dann arbeitet.

    Wenn Du so weit durchgestiegen bist, dann kannst Du Dich mit der <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=Frage "globale Variablen" versus "lokale Variablen"> beschäftigen. Das Prinzip ist für alle wesentlichen Programmiersprachen gültig, sodass Du hier (ebenso wie beim Aufrufen von Funktionen) gleich für mehrere Programmiersprachen gleichzeitig lernst.

    Wenn Du diese beiden Aspekte verstanden hast, dann kannst Du versuchen, Dein Beispiel entsprechend zu verändern. Solltest Du unterwegs aber feststellen, dass es wohl noch hie und da an Verständnis mangelt, dann kannst Du im <http://de.selfhtml.org/navigation/syntax.htm#javascript@title=Syntaxverzeichnis von SELFHTML zu JavaScript> die entsprechenden Funktionen und ihre Wirkungsweise samt ihrer Verwendung nachschlagen. Und sollte das alles dann noch immer nicht genügen, dann kann ich Dich auf meinen Artikel verweisen, der auch mit Timer-gesteuerten Funktionsaufrufen arbeitet.

    Für konkrete Fachfragen ist ja auch noch das Forum da.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
  3. Hallo,

    ich werde wohl nie verstehen, warum

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

    bei einem Ereignis, das Jahre in der Zukunft liegt, der Counter sekundengenau sein muss, und warum

    setTimeout('countdown()',200);

    dieses auch noch fünf mal pro Sekunde aktualisiert werden muss.

    Gruß, Jürgen