Countdown in While-Schlaufe

befubo · 14.03.2011, 09:26

Hallo zusammen

Nach einiger Nachforschungsarbeit und eigenem gebastel muss ich jetzt mal mein Problem an "den Mann" bringen

Ich habe folgendes Script:

Code:

<html>
<head>
<script language="Javascript">
<!--
var countdown = "10";

function doCount()
	{
	if (countdown > 0)
		{
		countdown--
		}
	else
		{
		
		}

	var s = countdown;
	var h = Math.floor(s/3600);
	var m = Math.floor((s - (h * 3600))/60);
	s = (s-(h*3600))%60

	document.form.type.value=h+":"+m+":"+s+ ""
	setTimeout('doCount()',1000)
	}

doCount();
//-->
</script>
</head>
<body onload='doCount()'>

<form name="form">
<input type="text" name="type">
</form>

</body>
</html>

Das funktioniert soweit ganz gut, der COuntdown wird angezeigt und läuft runter...
Jetzt mein Problem:
Ich habe mehrere solcher Counter auf einer Seite, d.h. sie stören sich gegenseitig.
Mein Ansatz war, dass ich innerhalb einer Whileschlaufe bei jedem durchgang den Variabeln eine eigene Nummer anhänge.

Ich denke dieser Weg ist sicher machbar, ich hab allerdings Mühe, dass JS mit PHP zu verbinden. Mal so als Beispiel:

PHP-Code:

  <?php
$count = "0";
while($count < "3")
   {
   echo "
   <script language='Javascript'>
   <!--
   var countdown$count = '40';

   function doCount$count()
          {
       if (countdown$count > 0)
           {
           countdown$count--
              }
       else
           {
        
           }

       var s$count = countdown$count;
       var h$count = Math.floor(s$count/3600);
       var m$count = Math.floor((s$count - (h$count * 3600))/60);
       s$count = (s$count-(h$count*3600))%60

       document.form$count.type$count.value=h$count+':'+m$count+':'+s$count+ ''
       setTimeout('doCount$count()',1000)
       }

   doCount$count();
   //-->
   </script>
   <form name='form$count'>
   <input type='text' name='type$count'>
   </form>
   ";
   $count++;
   }
?>

Das ganze sieht nachher im Seitenquelltext so aus:

Code:

   <script language='Javascript'>
   <!--
   var countdown0 = '40';

   function doCount0()
   	   {
	   if (countdown0 > 0)
		   {
		   countdown0--
		      }
	   else
		   {
		
		   }

	   var s0 = countdown0;
	   var h0 = Math.floor(s0/3600);
	   var m0 = Math.floor((s0 - (h0 * 3600))/60);
	   s0 = (s0-(h0*3600))%60

	   document.form0.type0.value=h0+':'+m0+':'+s0+ ''
	   setTimeout('doCount0()',1000)
	   }

   doCount0();
   //-->
   </script>
   <form name='form0'>
   <input type='text' name='type0'>
   </form>
   
   <script language='Javascript'>
   <!--
   var countdown1 = '40';

   function doCount1()
   	   {
	   if (countdown1 > 0)
		   {
		   countdown1--
		      }
	   else
		   {
		
		   }

	   var s1 = countdown1;
	   var h1 = Math.floor(s1/3600);
	   var m1 = Math.floor((s1 - (h1 * 3600))/60);
	   s1 = (s1-(h1*3600))%60

	   document.form1.type1.value=h1+':'+m1+':'+s1+ ''
	   setTimeout('doCount1()',1000)
	   }

   doCount1();
   //-->
   </script>
   <form name='form1'>
   <input type='text' name='type1'>

   </form>
   
   <script language='Javascript'>
   <!--
   var countdown2 = '40';

   function doCount2()
   	   {
	   if (countdown2 > 0)
		   {
		   countdown2--
		      }
	   else
		   {
		
		   }

	   var s2 = countdown2;
	   var h2 = Math.floor(s2/3600);
	   var m2 = Math.floor((s2 - (h2 * 3600))/60);
	   s2 = (s2-(h2*3600))%60

	   document.form2.type2.value=h2+':'+m2+':'+s2+ ''
	   setTimeout('doCount2()',1000)
	   }

   doCount2();
   //-->
   </script>
   <form name='form2'>
   <input type='text' name='type2'>
   </form>

D.h. Ich habe alle Variablen mit einer Numemr versehen können, aber es werden nur 3 leere Input Felder angezeigt?
Mach ich iwo einen groben Denkfehler??

Danke und lg
befubo

PS: Falls das eher ins PHP Forum gehört tuts mir leid und ein Mod darf das Thema gerne verschieben, danke

mimomamu · 14.03.2011, 10:34

doCount bekommt zwei Parameter:

value: den aktuellen Wert des Countdowns
element: der DOM-Node, in das der Countdown geschrieben werden soll.

Das sieht dann ungefähr so aus:

Code:

function doCount(value, element)
{
    if (value > 0) {
        --value;
        // Der Timeout wird hier gesetzt, damit kein neuer umsonst gestartet wird.
        setTimeout(function() { doCount(value, element); },1000);
    }

    var s0 = value;
    var h0 = Math.floor(s0/3600);
    var m0 = Math.floor((s0 - (h0 * 3600))/60);
    s0 = (s0-(h0*3600))%60;

    element.value=h0+':'+m0+':'+s0+ '';
}

Wenn du jetzt ein

Code:

<input type='text' id='firstinput' name='type0'>

hast, dann kannst du dafür einen Countdown starten mit

Code:

doCount(100, document.getElementById("firstinput"))

Falls dir

Code:

function() { doCount(value, element); }

sonderbar vorkommt, dann informiere dich über anonyme Funktionen und Closures.

befubo · 14.03.2011, 13:39

Hi mimomamu und erstmal danke

Ich hab jetzt etwas rumprobiert, bin mir aber nicht sicher ob ich richtig an die Sache rangehe...

Ich habe hier die Datei "test.php"

PHP-Code:

  <?php

   echo "

   <script language='Javascript'>

   <!--   

   var countdown$count = '$zaeler';

 
   function doCount$count()

          {

       if (countdown$count > 0)

           {

           countdown$count--

              }

       else

           {

 
           }

 
       var s$count = countdown$count;

       var h$count = Math.floor(s$count/3600);

       var m$count = Math.floor((s$count - (h$count * 3600))/60);

       s$count = (s$count-(h$count*3600))%60

 
       document.form$count.type$count.value=h$count+':'+m$count+':'+s$count+ ''

       setTimeout('doCount$count()',1000)

       }

 
   doCount$count();

   //-->

   </script>

   

   ";

 
?>

Und Includen tu ich es hier:

PHP-Code:

  <?php

$count = "1";

while ($count < "12")

    {

    $ID = "ID_";

    $ID .= $count;

    $B = "B_";

    $B .= $count;

    $abfrage = "SELECT $ID FROM game WHERE nick LIKE '$nick'";

    $ergebnis = mysql_query($abfrage);

    while($row = mysql_fetch_object($ergebnis))

        {

        $zahl = $row->$ID; 

        }

 
    include("b.php"); //Generiert $zahl und $building

 
    $zahl_neu = $zahl + 1;

 
    $abfrage = "SELECT $B FROM game WHERE nick LIKE '$nick'";

    $ergebnis = mysql_query($abfrage);

    while($row = mysql_fetch_object($ergebnis))

        {

        $B = $row->$B; 

        }

 
    if($B == "") //Falls kein aktueller Bauauftrag

        {

 
        if(isset($_GET["build"]) && $count == $_GET["build"]) //Falls abgesendeter Bauauftrag

            {

            $timestamp = time();

            $new = $timestamp + $zeit;

            $build = "B_";

            $bb = $_GET["build"];

            $build .= $bb;

            $aendern = "UPDATE game Set $build = '$new' WHERE nick = '$nick'";

            $update = mysql_query($aendern);

            }

        else

            {

            echo "

            <tr>

            <td width='100px' align='left' bgcolor='$color'>

            <br>$building:<br><br> 

            </td>

            <td width='50px' align='left' bgcolor='$color'>

            <br>$zahl<br><br>

            </td>

            <td width='150px' align='left' bgcolor='$color'>

            <br><a href='build.php?nick=$nick&idd=$idd&build=$count'>Baue Stufe $zahl_neu</a><br><br>

            </td>

            </tr>

            ";

            }

        }

    else

        {

        $timestamp = time();

 
        if($B <= $timestamp)

            {

            $A = "B_";

            $A .= $count;

 
            $aendern = "UPDATE game Set $A = '' WHERE nick = '$nick'";

            $update = mysql_query($aendern);

 
            }

        else

            {

            $zaeler = $B - $timestamp;

            include("test.php"); //Hier wird das JS included

            echo "

            <tr>

            <td width='100px' align='left' bgcolor='$color'>

            <br>$building:<br><br> 

            </td>

            <td width='50px' align='left' bgcolor='$color'>

            <br>$zahl<br><br>

            </td>

            <td width='150px' align='left' bgcolor='$color'>

 
            <body onload='doCount$count()'>

            <form name='form$count'>

            <input type='text' name='type$count'>

            </form>

            </body>

 
            </td>

            </tr>

            ";

            }

        }

    $count++;

    }

?>

Wenn ich das so mache, dann funktioniert immer der Erste Timer perfekt und bei allen anderen is einfach das input feld leer.
Jetzt, kannst du mir nochmals vielleicht genauer sagen, wo ich was abändern muss?
So wie ich das verstanden habe, füge ich mit deinem Vorgehen jeder Funktion einen eigenen Wert und Zielort zu (mit (value, element)...
Aber wie ich das einrichte und auswerte ist mir noch nicht gank klar...

thx und lg
befubo

mimomamu · 15.03.2011, 13:32

Zitat:

Zitat von befubo

So wie ich das verstanden habe, füge ich mit deinem Vorgehen jeder Funktion einen eigenen Wert und Zielort zu (mit (value, element)...

Nein. Es gibt nur noch eine Funktion doCount. Die kann auch in eine JavaScript-Datei und muss nicht von PHP erzeugt werden.

Außerdem: du packst jedes input-Element in ein body-Element. Das ist nicht gut. Ein HTML-Dokument darf nur ein einziges body-Element haben und das muss Kind des html-Elementes sein.

nikosch · 15.03.2011, 17:59

Zitat:

function doCount$count()

Sowas ist doch Mist. Statt das DRY-Prinzip maximal zu verletzen, soltest Du Dich mal mit Javascript beschäftigen. Du kannst hier einfach ein Objekt benutzen oder eine Funktion, die die zuständigen Laufvariablen für die einzelnen Counter kapselt.

befubo · 15.03.2011, 20:38

Ja das ist schon möglich.
Ich konzentrier mich eig nur auf PHP, aber für diesen Counter brauch ich JS...
Das ich aber nur wegen einem einzigen Script nicht gleich das ganze JavaScript lernen möchte ist vielleicht verständlich...

Nicht, dass ich dir nicht recht geben würde, aber ich bettle bei niemandem um ein Script und Geld um eins machen zu lassen hab ich nicht...

Und das mit dem angehängten $count war für mich einfach der logischste Weg...

nikosch · 15.03.2011, 20:55

In JS gibt es aber bspw. Variablengültigkeiten über den Funktionsrumpf hinaus. Von daher kann diese Idee klappen, muss aber nicht.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Problem mit Countdown	st0n3d	JavaScript, Ajax und mehr	10	04.03.2011 19:00
Countdown Funktion mehrmals ausführen	secretwz	JavaScript, Ajax und mehr	3	17.06.2010 12:17
while in while schleife	patrick146	PHP Tipps 2010	13	08.02.2010 16:41
Serveruhrzeit -> Countdown	phplars	PHP Tipps 2009	10	30.10.2009 17:09
[Erledigt] while() in while()	Italo	PHP Tipps 2009	16	29.06.2009 21:04
while schleife in einer while schleife beim tmpl-sys		PHP Tipps 2005-2	0	27.07.2005 15:07
2 verschachtelte while Schleifen. Großes Performanceproblem		Datenbanken	3	30.05.2005 12:52
php in ein JavaScript Countdown einbinden!	Boennchen	PHP Tipps 2005	11	26.04.2005 13:41
Wie kann ich den Countdown von der Stautsleiste in den Body		HTML, Usability und Barrierefreiheit	17	25.04.2005 22:04
[Erledigt] JavaScript + PHP (SQL) Countdown		HTML, Usability und Barrierefreiheit	5	23.12.2004 14:01
problem (countdown)		HTML, Usability und Barrierefreiheit	8	07.11.2004 23:08
while Schlaufe		PHP Tipps 2004	2	23.10.2004 12:34
PHP MySQL Problem mit Hyperlink in einer While Schlaufe		PHP Tipps 2004	20	09.07.2004 13:46
javascript countdown in while scheife	Ohrwurm83	PHP Tipps 2004	1	02.07.2004 16:50
[Erledigt] Countdown		HTML, Usability und Barrierefreiheit	2	27.06.2004 02:32


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.03.2011, 10:34
mimomamu Erfahrener Benutzer Registriert seit: 23.08.2010 Beiträge: 495 PHP-Kenntnisse: Fortgeschritten	doCount bekommt zwei Parameter: value: den aktuellen Wert des Countdowns element: der DOM-Node, in das der Countdown geschrieben werden soll. Das sieht dann ungefähr so aus: Code: function doCount(value, element) { if (value > 0) { --value; // Der Timeout wird hier gesetzt, damit kein neuer umsonst gestartet wird. setTimeout(function() { doCount(value, element); },1000); } var s0 = value; var h0 = Math.floor(s0/3600); var m0 = Math.floor((s0 - (h0 * 3600))/60); s0 = (s0-(h03600))%60; element.value=h0+':'+m0+':'+s0+ ''; } Wenn du jetzt ein Code: <input type='text' id='firstinput' name='type0'> hast, dann kannst du dafür einen Countdown starten mit Code: doCount(100, document.getElementById("firstinput")) Falls dir Code: function() { doCount(value, element); } sonderbar vorkommt, dann informiere dich über anonyme Funktionen und Closures. __________________ Meinungen, die ich geäußert habe, sind nicht notwendigerweise meine eigenen. Abweichungen von der deutschen Rechtschreibung unterliegen dem Urheberrecht, dürfen aber unter den Bedingungen von verwendet werden Geändert von mimomamu (14.03.2011 um 10:45 Uhr).*

15.03.2011, 20:55
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	In JS gibt es aber bspw. Variablengültigkeiten über den Funktionsrumpf hinaus. Von daher kann diese Idee klappen, muss aber nicht. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --