Countdown mit grafischem Balken

**Kropff** · 17.03.2010, 09:53

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

**Kangarooo** · 17.03.2010, 09:58

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=0; i<sek; i++) 
        {
        document.write('<img src="imgs/balken.gif">');
        }
        setTimeout('countdown()',1000);
        }
        else location.href='logout.php';
        
        }
        //-->
        </script>

**Kropff** · 17.03.2010, 10:07

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

**Kangarooo** · 17.03.2010, 10:13

Achsoooo...oh man! Alles klar! VIELEN DANK!!!

**Kangarooo** · 17.03.2010, 10:19

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!?

**Kropff** · 17.03.2010, 10:31

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

Peter

**Kangarooo** · 17.03.2010, 10:35

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!

**Kropff** · 17.03.2010, 10:42

Dann lass dir mal das ausgeben (siehst du in der Firebug-Konsole):

PHP-Code:


console.log(document.getElementById('zaehler').style.width);

Peter

**Kangarooo** · 17.03.2010, 10:44

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!!!!!!!!!!

**Kangarooo** · 17.03.2010, 11:34

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>

**Kangarooo** · 17.03.2010, 11:52

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....
                }

**Kropff** · 17.03.2010, 13:19

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 (0 == sek % 36)

Peter

PS: Achte mal auf deine Rechtschreibung

**AmicaNoctis** · 17.03.2010, 13:24

oder gleich 3600 als zweiten Parameter an setTimeout/setInterval übergeben

**Kangarooo** · 17.03.2010, 13:31

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

Countdown mit grafischem Balken