Javascript Countdown mehrmals aufrufen

S

Sasser

Erfahrenes Mitglied
Hallo Leute!

Ich poste mal die PHP-Funktion, welche ein JavaScript ausgibt. Das JavaScript zählt die Zeit runter und aktualisiert bei 0 die Seite.

Wenn ich nun aber diese Funktion 2 oder mehrmals nutze, funktioniert nur das 1. Wie kann man das realisieren, dass man diesen Counter mehrmals auf einer Webseite nutzen kann?

PHP: 
function countdown($timeleft) {
	$info = "<script type='text/javascript'>";
	$info .= "var lngSekunden = $timeleft;";
	$info .= "function secondCount(){";
	$info .= "intStunden = Math.floor(lngSekunden/(60*60));";
	$info .= "intStunden = (intStunden < 10) ? '0'+intStunden : intStunden;";
	$info .= "lngHelpSekunden = lngSekunden - intStunden*60*60;";
	$info .= "intMinuten = Math.floor(lngHelpSekunden/60);";
	$info .= "intMinuten = (intMinuten < 10) ? '0'+intMinuten : intMinuten;";
	$info .= "intSekunden = lngHelpSekunden - intMinuten*60;";
	$info .= "intSekunden = (intSekunden < 10) ? '0'+intSekunden : intSekunden;";
	$info .= "strZeit = intStunden + ':' + intMinuten + ':' + intSekunden;";
	$info .= "document.getElementById('countdown').innerHTML = strZeit;";
	$info .= "lngSekunden--;";
	$info .= "if(lngSekunden >= 0) window.setTimeout('secondCount()', 1000);";
	$info .= "else location.href = '$PHP_SELF';";
	$info .= "}";
	$info .= "</script>";
	$info .= "<b><span id='countdown'></span></b>";
	return $info;
}
 
Hi,

Sasser hat gesagt.:
Das JavaScript zählt die Zeit runter und aktualisiert bei 0 die Seite.

Wenn ich nun aber diese Funktion 2 oder mehrmals nutze, funktioniert nur das 1.

PHP: 
document.getElementById('countdown').innerHTML = strZeit;

[...]

<span id='countdown'></span>
Zum Vergrößern anklicken....

ist ja auch kein Wunder, denn ein ID-Bezeichner (hier: #countdown) muß im HTML-Dokument eindeutig sein, sprich darf darin nur einmal vergeben werden.

Ein Blick in die entsprechende Meldung der Fehler-Konsole hätte dich aber über diesen Mißstand im Dokument aufgeklärt:

ID "countdown" already defined
Zum Vergrößern anklicken....

Und welchen Sinn soll nun überhaupt der mehrmalige Aufruf des Countdowns bis zur Seitenaktualisierung innerhalb einer Seite ergeben?

mfg Maik
 
Ja und wie löse ich das nun elegant, sodass man es mehrmals nutzen kann?

Es sollen mehrere Countdowns mit verschiedenen Zeiten angezeigt werden.
 
Ich würde den Countern eine eindeutige Klasse zuweisen und die darf nirgendswo anders auftauchen.
Dann mit document.getElementsByClassName alle dieser Counter Elemente durchgehen und die entsprechende neue Zeit zuweisen. Die Ziel Zeit kannst du direkt irgendwo im Javascript Code speicern oder in einem DIV das ist dir überlassen.
 
Ich hab mich kurz dran gesetzt und das Ergebnis sieht so aus:
Code: 
<script type='text/javascript'>

function secondCount(){
    var dat = new Date();
    now=dat.getTime();
    var counter=document.getElementsByClassName("countdown"); //sammelt alle mit countdown bezeichnete Elemente in einem Array
    var i=0;
        while(i<counter.length)
        {
            var dif=parseInt(counter[i].id)-now; //Diferenz zwischen jetzt und Zielzeit
            if(dif>0)
            {
                var difstunden=Math.floor(dif/(1000*60*60));
                dif=dif-(difstunden*(1000*60*60));
                var difminuten=Math.floor(dif/(1000*60));
                dif=dif-(difminuten*(1000*60));
                var difsekunden=Math.floor(dif/(1000));
                counter[i].innerHTML=difstunden+":"+difminuten+":"+difsekunden; //GIBT DIE DIFFERENZ AUS
            }
            else
            {
                counter[i].innerHTML="00:00:00";
            }
            i++;
        }
        window.setTimeout('secondCount()', 500);
    }
    secondCount();
    </script>
<html>
    <body>
    <b onclick="alert(time())"><span class='countdown' title="counter 1" id="1532645058004">Feld 1</span></b>
    <b><span class='countdown' title="counter 2" id="1932645058004">Feld 2</span></b>
    <b><span class='countdown' title="counter 3" id="1289265058004">Feld 3</span></b>
    </body>
</html>
Die ID jeweils ist der Timestamp der jeweiligen Zielzeit( siehe: http://de.selfhtml.org/javascript/objekte/date.htm#get_time).
Den musste dann vorher mit PHP erzeugen lassen oder mit irgendeinem Rechner im Internet.
Man hofft man konnte nen bischen helfen. Bei mir hat dieses Beispiel zumindest funktioniert.
Wobei ich möchte darauf hinweisen das die Zielzeit nun nicht umbedingt in der ID gespeichert werden sollte, sondern dafür nen besserer Speicher Ort z.B, irgendwo im Javscript Code oder in einem woanders im Dokument.
 
Zuletzt bearbeitet:
Danke dir!

Aber eins verstehe ich nicht: Er soll nur bereits vorhande Sekunden runterzählen, aber ich bekomme das irgendwie nicht hin... Bei mir zählt er hochwärts LOL
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück