mehrere JavaScript-Countdowns mithilfe von PHP

[SebastianMeßmer]

Hi<br>Auf einer Internetseite habe ich mithilfe von PHP einen Countdown eingebunden:<p>echo '<script language="JavaScript">';<br>echo 'var hh="'.$dauer_h.'";';<br>echo 'var ="'.$dauer_m.'";';<br>echo 'var ss="'.$dauer_s.'";';<br>echo 'function countdown()';<br>echo '{';<br>echo 'if(hh<0)';<br>echo '{';<br>echo 'document.counterform.counter.value="fertig";';<br >echo 'self.location.reload();';<br>echo '}';<br>echo 'else';<br>echo '{';<br>echo 'document.counterform.counter.value=hh+":"+mm+":"+ ss';<br>echo '}';<br>echo 'ss=ss-1;';<br>echo 'if(ss<0)';<br>echo '{';<br>echo 'ss=59;';<br>echo 'mm=mm-1;';<br>echo 'if(mm<0)';<br>echo '{';<br>echo 'mm=59;';<br>echo 'hh=hh-1;';<br>echo 'if((hh>0)&&(hh<10))';<br>echo 'h="0"+hh';<br>echo '}';<br>echo 'else';<br>echo '{';<br>echo 'if(mm<10)';<br>echo 'mm="0"+mm';<br>echo '}';<br>echo '}';<br>echo 'else';<br>echo '{';<br>echo 'if(ss<10)';<br>echo 'ss="0"+ss';<br>echo '}';<br>echo 'setTimeout("countdown()", "1000")';<br>echo '}';<br>echo '</script>';<p>Jetzt habe ich dazu 2 Fragen:<br>1) Kann ich den Countdown auch außerhalb eines Textfeldes anzeigen lassen? Das Textfeld passt da irgendwie nicht zum Style - kann man das nicht als einfachen Text anzeigen lassen?<br>2) Jetzt möchte ich eine beliebige (variable) Anzahl von Countdowns auf die Seite implementieren - ich kann in PHP die verschiedenen Countdowns über eine FOR (oder WHILE)-Schleife abarbeiten, aber wie mache ich das im JavaScript-Code mit mehereren Countdowns?<p>danke schonmal für eure Hilfe, Sebastian Meßmer<p>edit: Ach so ja - document.counterform.counter ist ein INPUT-HTML-Formular-Element der Klasse "text", also so:<br><PRE>
&lt;form name="counterform"&gt;
&lt;input name="counter" type="text"&gt;
&lt;/form&gt;
</PRE>

[Daniel-Heinrich]

1)
ja geht.
das ganze sieht wie folgt aus:
da wo du den countodwn hinhaben willst schreibst du folgendes rein:

<pre>
&lt;div id="countdown">&lt;/div>
</pre>

den javascript-quellcode müsstest du dann in folgende Form abändern:

<pre>
document.getElementById('countdown').innerHTML=zei t;
</pre>
cu

Danie

[SebastianMeßmer]

Danke für deine Hilfe.<br>Achja - 2) hab ich inzwischen selbst gelöst. Da der JavaScript-Code ja dynamisch von PHP generiert wird, nummeriere ich die countdown()-Funktionen und die Variablen darin einfach durch.<br>Also countdown1(), countown2(),...die kommen sich dann auch nicht in die Quere.<p>cu, Sebastia

[Daniel-Heinrich]

2)is auch nich schwer:
versuchs mal mit dieser Funktion:

<pre>
<?
function neuerTimer($nr, $zeit)
{
echo 'v'.$nr.'=new Date();
function countdown'.$nr.'()
{
var bxx'.$nr.'=document.getElementById("timer'.$nr.'") ;
n'.$nr.'=new Date();
ss'.$nr.'='.$zeit.';
s'.$nr.'=ss'.$nr.'-Math.round((n'.$nr.'.getTime()-v'.$nr.'.getTime())/1000.);
m'.$nr.'=0;
h'.$nr.'=0;
if(s'.$nr.'<0)
{
bxx'.$nr.'.innerHTML="fertig";
self.location.reload();
}
else
{
if(s'.$nr.'>59)
{
m'.$nr.'=Math.floor(s'.$nr.'/60);
s'.$nr.'=s'.$nr.'-m'.$nr.'*60
}
if(m'.$nr.'>59)
{
h'.$nr.'=Math.floor(m'.$nr.'/60);
m'.$nr.'=m'.$nr.'-h'.$nr.'*60
}
if(s'.$nr.'<10)
{
s'.$nr.'="0"+s'.$nr.'
}
if(m'.$nr.'<10)
{
m'.$nr.'="0"+m'.$nr.'
}
bxx'.$nr.'.innerHTML=h'.$nr.'+":"+m'.$nr.'+":"+s'. $nr.';
}
window.setTimeout("countdown'.$nr.'();",999);
}';
}

function neueAusgabe($nr)
{
echo '<div id="timer'.$nr.'"></div>';
}
?>
</pre>

ein beispiel dafür:

<pre>
<p>&lt;html><br>
&lt;head><br>
&lt;script><br>
&lt;?<br>
neuerTimer(1, 10);<br>
neuerTimer(2, 6);<br>
?><br>
&lt;/script><br>
&lt;/head><br>
&lt;body onload="javascript:countdown1();countdown2();"><br >
&lt;?<br>
neueAusgabe(1);<br>
neueAusgabe(2);<br>
?></p>
</pre>

Beschreibung:
neuerTimer(2, 6) bedeutet neuer timer mit der nummer 2 und 6 sek. laufzeit.

bei aufruf der funktion neueAusgabe(2); wird dann die passende ausgabe erzeugt, hier für timer2.

die einzelnen texte zu verändern sollte kein problem für sie sein.

solltest du dennoch fragen haben, frag einfach *gg*

achja:
auch wichtig ist:
&lt;body onload="javascript:countdown1();countdown2();">
damit die timer gestartet werden(dein header-tag muss also um die option onload="javascript:countdown1();countdown2();" erweitert werden

[SebastianMeßmer]

klingt gut - soweit ich den Code bis jetzt verstehe scheint das auch zu funktionieren. Danke.<br>Aber eine Frage dazu habe ich noch: Wieso hast du bei setTimeout ein Intervall von 999 und nicht 1000 genommen? Liegt das daran, dass du noch die Ausführzeit des Programmes mit einberechnen möchtest