Countdown mit grafischem Balken

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

  • Countdown mit grafischem Balken

    Hallo! Ich habe folgendes Countdown-Script, welches auch einwandfrei funktioniert:

    PHP-Code:
    <script type="text/javascript">
            <!--
            
    sek=200;
            function 
    countdown(){
            
    sek--;
            
    document.getElementById('zaehler').innerHTML=sek;
            if(
    sek>0)
            
    setTimeout('countdown()',1000);
            
            else 
    location.href='logout.php';
            }
            
    //-->
            
    </script>
            </
    head>
            <
    body onload="countdown()">
            <
    div id="zaehler"></div
    Nun möchte ich aber das ganze grafisch haben, also z.B. einen horizontalen Balken, welche pro Sekunde abnimmt. Ich habe mir das so gedacht dass ich eben eine Grafik habe, welche 1 Pixel breit und 5 Pixel hoch ist, und dieser dann eben so oft dargetsellt wird zu Beginn, wie hoch die Sekunden Anzahl eingestellt ist, also in dem Fall 200 mal! Mit jeder Sekunde soll der Blaken kleienr werden. Ich hab überhaupt keine Ahnung im Moment wie ich das realisieren soll, kann mir da jemand helfen?

  • #2
    Leg ein HTML-Element an, verpass dem per CSS eine Höhe und die änderst du dann mit
    PHP-Code:
    document.getElementById('dein_element').style.height 
    Peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Ahh alles klar, ok, das versuche ich mal! ich hab das hier versucht, aber das geht überhaupt nicht, obwohl ich den Fehler absolut nicht finde:

      PHP-Code:
      <script type="text/javascript">
              <!--
              
      sek=200;
              function 
      countdown(){
              
      sek--;
              
      document.getElementById('zaehler').innerHTML=sek;
              if(
      sek>0){
              for(var 
      i=0i<seki++) 
              {
              
      document.write('<img src="imgs/balken.gif">');
              }
              
      setTimeout('countdown()',1000);
              }
              else 
      location.href='logout.php';
              
              }
              
      //-->
              
      </script
      Zuletzt geändert von Kangarooo; 17.03.2010, 10:05.

      Kommentar


      • #4
        Ich meinte das so:
        PHP-Code:
        <script type="text/javascript">
          
        sek 200;
          function 
        countdown()
          {
            
        sek--;
            
        document.getElementById('zaehler').style.width sek 'px';
            if(
        sek 0) {
              
        setTimeout('countdown()',1000);
            }
            else { 
              
        location.href='logout.php';
            }
          }
        </
        script>
        </
        head>
        <
        body onload="countdown()">
        <
        div id="zaehler" style="height: 10px; width: 200px; background: #f00;"></div
        Peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Achsoooo...oh man! Alles klar! VIELEN DANK!!!

          Kommentar


          • #6
            Ich mekre gerade, dass die Anzeige nicht stimmt! wenn ich z.B. nur 10 Sekunden einstelle und auch nur 10 Pixel, wird gar kein Balken angezeigt! Und auch der 200 Pixel Balken ist schon nach etwas 45 Sekunden abgelaufen!?

            Kommentar


            • #7
              Bei mir funktioniert es anstandslos. Wie sieht dein Code aus? Welchen Browser benutzt du?

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

              Kommentar


              • #8
                Ich benutze den Firefox und habe genau den Code nochmals rauskopiert, welchen du mir geantwortet hast! Sehr komisch, der Logout tritt nach 200 Sekundne ein, aber der Blaken ist schon nach etwa 45 Sekunden abgelaufen!

                Kommentar


                • #9
                  Dann lass dir mal das ausgeben (siehst du in der Firebug-Konsole):
                  PHP-Code:
                  console.log(document.getElementById('zaehler').style.width); 
                  Peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar


                  • #10
                    Ahh moment, jetzt habe ich es mal in einer CSS-Freien Umgebung ausgeben lassen, jetzt funktioniert es richtig! Da habe ich wol was flashc gemacht bei meiner CSS Datei !!
                    VIELEN DANK!!!!!!!!!!

                    Kommentar


                    • #11
                      So, jetzt habe ich es FAST geschafft, ABER! ich benötige dne Timer für 7200 Sekunden! Dann wre der Blaken natürlich etwas lang! Ich habe jetzt den Blaken auf 200 Sekunden einegstellt, aber den Timer auf 7200 Sekunden! Wie schaffe ich es, dass der Balken nur alle 10 Sekunden um 1 Pixel weniger wird???

                      PHP-Code:
                          <script type="text/javascript">
                                    
                      sek 7600;
                                    
                      sek2 200;
                                    
                                    function 
                      countdown()
                                    {
                                      
                      sek--;
                                  
                      sek2--;

                                      if(
                      sek 0) {
                                        
                      setTimeout('countdown()',1000);
                                  if(
                      sek2 0) {
                                  
                      document.getElementById('zaehler').style.width sek2 'px';
                                      }
                              
                                      }
                                      else { 
                                        
                      //location.href='logout.php';
                                      
                      }
                                    }
                                  </
                      script

                      Kommentar


                      • #12
                        Habe eine NICHT elegante Lösung gefunden, vielleicht weiß ja jemand eine bessere:

                        PHP-Code:
                        if(sek == 7300) {
                                                
                        document.getElementById('zaehler').style.width sek 100 'px';
                                        }
                                        
                                        if(
                        sek == 7000) {
                                                
                        document.getElementById('zaehler').style.width sek 100 'px';
                        //usw....
                                        

                        Kommentar


                        • #13
                          Denk doch mal logisch. 7200 Sekunden (also 12 Minuten) und einen 200 Pixel langen Balken ergibt eine einfache Rechung.

                          7200/200 = 36

                          Also musst du nur alle 36 Sekunden den Balken um einen Pixel verkleinern. Dazu reicht eine einfache Überprüfung per Modulo-Operator aus.
                          PHP-Code:
                          if (== sek 36
                          Peter

                          PS: Achte mal auf deine Rechtschreibung
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            oder gleich 3600 als zweiten Parameter an setTimeout/setInterval übergeben
                            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                            Super, danke!
                            [/COLOR]

                            Kommentar


                            • #15
                              Alles klar, vielen Dank! Übrigens sind 7200 Sekunden 2 Stunden und nicht 12 Minuten :-)

                              Kommentar

                              Lädt...
                              X