Javascript Countdown von Input auf Tabelle bekommen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript Countdown von Input auf Tabelle bekommen

    Hi Leute,

    versuche grade diesen (s.u.) Javascript Countdown in meine Webseite einzubinden, funktioniert auch super. Allerdings möchte ich den Countdown später mit einem Pic hinterlegen, das erfordert spezielle Abstände untereinander. Deshalb will ich den Script auf eine Tabelle bekommen, da dieser ja momentan noch in einem Input tag drin ist.

    Vielen Dank im voraus.

    Hier der Code:


    PHP-Code:
    <html>
      <
    head>
        <
    title>Datum-Countdown mit JavaScript</title>

        <
    script language="JavaScript">
          
    // Ziel-Datum in MEZ
          
    var jahr=2009monat=7tag=1stunde=0minute=0sekunde=0;
          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=0monate=0tage=0stunden=0minuten=0sekunden=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+" Jahr,  ";  
              (
    monate!=1)?monate=monate+"  ":monate=monate+" Monat,  ";
              (
    tage!=1)?tage=tage+"   ":tage=tage+" Tag,  ";
              (
    stunden!=1)?stunden=stunden+"  ":stunden=stunden+" Stunde,  ";
              (
    minuten!=1)?minuten=minuten+"   ":minuten=minuten+" Minute  und  ";
              if(
    sekunden<10sekunden="0"+sekunden;
              (
    sekunden!=1)?sekunden=sekunden+"   ":sekunden=sekunden+"";

              
    document.countdownform.countdowninput.value=
                  
    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" style="border:none; height:55px; width:320px; 
    background-image:url(img/countdown_clock.png); 
    background-repeat:no-repeat; font-size:44px; font-family:Arial; margin-top:2px; color:#FFF; padding-left:17px;"
    >
          </
    p>
        </
    form>
      </
    body>

    </
    html
    EDIT:
    php-tags und umbrüche sponsored by kropff
    Zuletzt geändert von Kropff; 08.03.2009, 15:26.

  • #2
    Bitte brich als erstes deinen Code um. Danke.

    Deshalb will ich den Script auf eine Tabelle bekommen, da dieser ja momentan noch in einem Input tag drin ist.
    Was ist deine Frage?

    Kommentar


    • #3
      Hi,

      ahm meine Frage bzw. mein Problem ist ich möchte die verschiedenen Zahlen von Monat, Jahr, Minute etc auf verschiedene Tabellenabschnitte trennen bzw. die abstände zwischen den zahlen iwie mit css regeln.

      danke

      Kommentar


      • #4
        Irgendwie? Definiere erstmal genau was du erreichen willst, und dann sag uns, was du schon versucht hast um dein Ziel zu erreichen.
        Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

        Kommentar


        • #5
          Original geschrieben von powermax90
          Hi,

          ahm meine Frage bzw. mein Problem ist ich möchte die verschiedenen Zahlen von Monat, Jahr, Minute etc auf verschiedene Tabellenabschnitte trennen bzw. die abstände zwischen den zahlen iwie mit css regeln.

          danke
          dafür musst du dich mit dom-manipulation auskennen. schau dir auch mal diese tutorials an.

          peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            ahm zu ArSen`s Anfrage: Ich möchte den Output des Countdowns also diese Zahlenfolgen: 3 22 04 16 53 z.b. nicht nur in einem Input haben (habe mit css versucht es etwas anzupassen aber funktionierte nicht wirklich) sondern die jeweiligen Zahlen für Monat, Tag, Stunde, Minute und Sekunde auf verschiedene "INput-Tags" aufzuteilen, damit ich diese jedes für sich bearbeiten kann vllt in Farbe, Schriftgröße etc

            Danke

            Kommentar


            • #7
              HIer nochmal so wies aktuell aussieht und wies aussehen soll als Anhang:

              (eigentlich nur das Problem, dass die Zahlen nicht alle in der MItte deren Felder stehen, sondern verschoben)


              Angehängte Dateien

              Kommentar


              • #8
                Mmmh ... mal eine pauschale Antwort ohne groß nachzudenken:
                Du hast die einzelnen Zeit-Elemente in den JS-Variablen vorliegen ... baue nun input-Text-Felder mit ID für den jeweiligen Wert (tag, Stunde, ...) in die Seite ein und fülle den Wert mit ...

                document.getElementById('time').innerHTML = tag;
                document.getElementById('stunde').innerHTML = stunde;
                document.getElementById('minute').innerHTML = minute;
                ...

                Ich hoffe ich habe Dich richtig verstanden ... nur als Denkanstoß!

                Gruß php_fussel

                Kommentar


                • #9
                  Aha, das ist doch schonmal ne genauere Zielbeschreibung, insbesondere mit dem Bild

                  Ja, prinzipiell hat php_fussel ja schon die Antwort gegeben. Momentan seh ich aber keinen Grund, warum das input-Felder sein müssen. Ich würde daher viel mehr div-Container verwenden, diese fertig stylen wie du sie haben willst (CSS), und dann wie bereits angesprechen das innerHTML manipulieren.
                  Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                  Kommentar


                  • #10
                    würd ich ja machen wenn ich wüsste wie^^

                    ich benutze javascript eig. nur für einfache onmouseover effekte usw. Aber wie meinst du das. Welche Variablen sind das und wie binde ich die entsprechend einzeln in die Input-Tags ein?

                    Kommentar


                    • #11
                      Jetzt scherzt du aber, oder? Schau dir doch mal den JavaScript-Quelltext an, den du selbst gepostet hast (!). Die Variablen wie "monate", "tage" und "sekunden" könnten dem doch sehr nahe kommen, oder?
                      Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                      Kommentar


                      • #12
                        jain war mehr oder weniger kein "Scherz" hat mich nur verwirrt das da keine variablen genau definiert wurden. Also ok die Vars sind jetzt da. Und dann dachte mit sowas wie:


                        <input name="countdowninput('jahr')"> ?? oder so ähnlich?

                        Kommentar


                        • #13
                          <input name="countdowninput('jahr')"> ?? oder so ähnlich?
                          Ehhmmm?!?!?

                          Original geschrieben von php_fussel
                          document.getElementById('time').innerHTML = tag;
                          document.getElementById('stunde').innerHTML = stunde;
                          document.getElementById('minute').innerHTML = minute;
                          Wie wärs damit, was dir schon vorgesagt wurde? Wenn du nicht weißt was die Funktion macht helfen dir sowohl selfHTML als auch notfalls Google gerne weiter.
                          Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                          Kommentar


                          • #14
                            Momentan seh ich aber keinen Grund, warum das input-Felder sein müssen.
                            Ja, da hast Du Recht ... aber DIVs sind Block-Elemente (welche man mit CSS natürlich auch ummodeln könnte bzw. floaten), dann wären doch SPANs (Inline-Elemente) eventuell günstiger!?

                            Gruß php_fussel

                            Kommentar


                            • #15
                              ah cool.

                              Hab grad nen bissl dran rumgetüftelt und jetzt funktionierts. jetzt kann ich ja die einzelnen sachen dahin packen wo ich sie haben will

                              danke an alle die mir dabei geholfen haben

                              Kommentar

                              Lädt...
                              X