JavaScript Countdown mehrmals untereinander

te one

Lt. Commander
Registriert
Apr. 2009
Beiträge
1.252
Also ich habe folgendes problem:
die zeit, wann ein gebäude des benutzers fertiggebaut ist, wird in der datenbank gespeichert.
mit folgendem code möchte ich einen countdown bis zu diesem zeitpunkt einfügen:
(die variable $timestamp ist die variable in der immer gespeichert wird, welcher wert in der Datenbank in der Spalte (beispielsweiße) Kraftwerk_fertig steht) (der name Kraftwerk_fertig wird dann in jedem schleifendurchlauf geändert! zB zu Metallmine_fertig)
PHP:
    echo 'Fertig in:<br/>';
    $timestamp=$userbuilding_step[''.$building_row['building_name'].'_fertig'];
    $fertig=array();
    $fertig['jahr']=date("Y", $timestamp);
    $fertig['monat']=date("n", $timestamp);
    $fertig['tag']=date("j", $timestamp);
    $fertig['stunde']=date("G", $timestamp);
    $fertig['minute']=date("i", $timestamp);
    $fertig['sekunde']=date("s", $timestamp);
    echo '<html>
    <script language="Javascript">
<!--

var CountdownJahr = '.$fertig['jahr'].';
var CountdownMonat = '.$fertig['monat'].';
var CountdownTag = '.$fertig['tag'].';
var CountdownStunde = '.$fertig['stunde'].';
var CountdownMinute = '.$fertig['minute'].';
var CountdownSekunde = '.$fertig['sekunde'].';

function CountdownAnzeigen()
{
    var Jetzt = new Date();
    var Countdown = new Date(CountdownJahr, CountdownMonat-1, CountdownTag, CountdownStunde, CountdownMinute, CountdownSekunde);
    var MillisekundenBisCountdown = Countdown.getTime()-Jetzt.getTime();
    var Rest = Math.floor(MillisekundenBisCountdown/1000);
    var CountdownText = "";

    if(Rest >= 31536000)
    {
        var Jahre = Math.floor(Rest/31536000);
        Rest = Rest-Jahre*31536000;

        if(Jahre > 1 || Jahre == 0)
        {
            CountdownText += Jahre + ":";
        }
        else if(Jahre == 1)
        {
            CountdownText += Jahre + ":";
        }
    }
    if(Rest >= 86400)
    {
        var Tage = Math.floor(Rest/86400);
        Rest = Rest-Tage*86400;

        if(Tage > 1 || Tage == 0)
        {
            CountdownText += Tage + ":";
        }
        else if(Tage == 1)
        {
            CountdownText += Tage + ":";
        }
    }
    if(Rest >= 3600)
    {
        var Stunden = Math.floor(Rest/3600);
        Rest = Rest-Stunden*3600;

        if(Stunden > 1 || Stunden == 0)
        {
            CountdownText += Stunden + ":";
        }
        else if(Stunden == 1)
        {
            CountdownText += Stunden + ":";
        }
    }
    if(Rest >= 60)
    {
        var Minuten = Math.floor(Rest/60);
        Rest = Rest-Minuten*60;

        if(Minuten > 1 || Minuten == 0)
        {
            CountdownText += Minuten + ":";
        }
        else if(Minuten == 1)
        {
            CountdownText += Minuten + ":";
        }
    }

    if(Rest > 1 || Rest == 0)
    {
        CountdownText += Rest + "";
    }
    else if(Rest==1)
    {
        CountdownText += Rest + "";
    }

    document.getElementById(\'Countdown\').innerHTML = CountdownText;
    window.setTimeout("CountdownAnzeigen()", 1000);
}
//-->
</script>
</head>
<body onLoad="CountdownAnzeigen();">

<span id="Countdown"></span>
</html>';
dies ist auch kein problem! nur komischerweiße zeigt er mir das maximal einmal auf der seite an!
also macht er des (wenns zum beispiel 2mal durch eine schleife in php gejagt wird) folgendes:

Fertig in:
10:51:6

Fertig in:
die obere zahl zählt runter, aber unter dem zweiten "Fertig in:" wird nichtsmehr angezeigt!

ist wahrscheinlich ein ganz einfach zu lösendes problem, nur ich kann nicht richtig javascript (hab nur des ganze php und sql zeugs gemacht, und mir diesen countdown ausm internet gesucht)
 
document.getElementById() bezieht sich immer auf EIN Element. Gib dem zweiten Countdown eine andere ID (z.B. Countdown2) und füge dann ein
document.getElementById(\'Countdown2\').innerHTML = CountdownText;
ein!
 
ok danke, werd ich machen! :)

jetz zeigts mir aber immer nur den letzten countdown an :(
hab jetz des ende von dem countdown wie folgt verändert:
PHP:
//...Hier wird das ganze zeug berechnet

    document.getElementById(\'Countdown1\').innerHTML = CountdownText;
    window.setTimeout("CountdownAnzeigen()", 1000);
}
//-->
</script>
</head>
<body onLoad="CountdownAnzeigen();">

<span id="Countdown1"></span>
</html>';
bei span id und getElementByID nummerier ich die halt dann immer durch... passt des?


edit: hier im forum zeigts i-wie (weiß nicht obs bei euch auch so is) den ersten \ zum escapen nicht an! der ist aber eigentlich dran.
 
Zuletzt bearbeitet:
So meinte ich.
PHP:
    //...Hier wird das ganze zeug berechnet

    document.getElementById(\'Countdown1\').innerHTML = CountdownText;
    document.getElementById(\'Countdown2\').innerHTML = CountdownText;
    window.setTimeout("CountdownAnzeigen()", 1000);
}//-->
</script>
</head>
<body onLoad="CountdownAnzeigen();">

<span id="Countdown1"></span>
<span id="Countdown2"></span>
</html>';
(Die Problematik mit den \ besteht bei mir auch ;) )
 
ist wahrscheinlich ein bug im board! (wird vllt doppelt escaped...?!)

ich guck gleich mal obs so geht (hab halt des problem, dass ich wirklich keine ahnung von javasript habe :( )
abba ich geh mal davon aus dass du schon rechthaben wirst :D

ne also wenn ich nur das unten veränder gehts auch nicht....
(hab auch jetz schon oben rumgepfuscht, abba es will einfach nicht)
könntest du mir mal bitte den ganzen quellcode für 2 solche countdowns untereinander geben?? (damit ich auch seh was ich oben noch i-wie verändern muss!)

am ende soll dann einfach folgendes zu sehen sein:

Fertig in:
14:12:21:10

Fertig in:
10:22:30:45

Für beide countdowns sollen verschiedene variablen genutzt werden!
(Zurzeit zeigt es mir immer nur des zweimal "Fertig in:" und nach dem zweiten dann den countdown an!)
 
Zuletzt bearbeitet:
Ok, dachte es sollen zwei gleiche Countdowns sein. Hier mal ein funktionierender Code (in HTML-Datei kopieren und ausführen; deine PHP-Sachen musst du schon selbst dazubauen aber das sollte kein Problem sein!):
Code:
<html>
<head><title>Test</title>
<script type="text/javascript">
function CountdownAnzeigen(){
    MyCountdown(01,08,2009,22,09,12,'Countdown');
    MyCountdown(31,06,2009,21,15,30,'Countdown2');
    MyCountdown(12,08,2009,12,03,45,'Countdown3');
} 

function MyCountdown(Tag, Monat, Jahr, Stunde, Minute, Sekunde, spanid) { 
    var Jetzt = new Date(); 
    var Countdown = new Date(Jahr, Monat-1, Tag, Stunde, Minute, Sekunde); 
    var Rest = Math.floor((Countdown.getTime()-Jetzt.getTime())/1000); 
    var CountdownText = ""; 

    if(Rest > -1){
        if(Rest >= 31536000){ 
            var Jahre = Math.floor(Rest/31536000); 
            Rest = Rest-Jahre*31536000;
            CountdownText += Jahre + ":"; 
        } 
    
        if(Rest >= 86400){ 
            var Tage = Math.floor(Rest/86400); 
            Rest = Rest-Tage*86400;
            CountdownText += Tage + ":"; 
        } else if (CountdownText != "") CountdownText += "00:"; 
    
        if(Rest >= 3600){ 
            var Stunden = Math.floor(Rest/3600); 
            Rest = Rest-Stunden*3600;
            if(Stunden < 10) CountdownText += "0"; 
            CountdownText += Stunden + ":"; 
        } else if (CountdownText != "") CountdownText += "00:"; 
    
        if(Rest >= 60){ 
            var Minuten = Math.floor(Rest/60); 
            Rest = Rest-Minuten*60;
            if(Minuten < 10) CountdownText += "0"; 
            CountdownText += Minuten + ":"; 
        } else if (CountdownText != "") CountdownText += "00:"; 

        if(Rest < 10) CountdownText += "0"; 
        CountdownText += Rest;    	
    }
    
    document.getElementById(spanid).innerHTML = CountdownText; 
    window.setTimeout("MyCountdown("+Tag+","+Monat+","+Jahr+","+Stunde+","+Minute+","+Sekunde+",'"+spanid+"')", 1000); 
} 
</script>
</head>
<body onLoad="CountdownAnzeigen();">
	<span id="Countdown"></span><br>
	<span id="Countdown2"></span><br>
	<span id="Countdown3"></span>
</body>
</html>
Ich habe auch so bisschen was geändert weil die ifs bisher reichlich sinnfrei waren und die Formatierung ungünstig war. Außerdem gabs nen Bug (wenn die Tage/Stunden/Minuten "0" sind wurden sie einfach ausgelassen!), der nun behoben sein sollte. Das Verhalten ist momentan so, dass vorne Stellen ausgeblendet werden wenn sie nicht benötigt werden. Man könnte dies natürlich auch mit Nullen füllen wenn gewünscht. Stunden, Minuten und Sekunden werden immer mit 2 Stellen dargestellt, Tage und Jahre haben keine feste Breite. Auch dies wäre aber änderbar.
 
Zuletzt bearbeitet:
ah ich glaub jetz versteh ich des ganze!
jop der php-kram ist kein problem.
werds gleich mal ausprobieren!
die if's hatten für dieses script wirklich keine bedeutung, aber für des, wofür der countdown eigentlich gedacht war!

denn diese if's haben immer bestimmt welche einheit so hinter der zahl steht.
denn früher hat der countdown dann angezeigt: 7 Stunden 12 Sekunden ....
und da ja bei "1 Stunde" es blöd ist wenn "1 Stunden" dortsteht wurden dort die if's eingebaut.

abba stimmt das se eigentlich echt sinnfrei für diesen zweck sind!

*gleich mal rumprobier obs geht*

leider zeigt er mir gar nichts an, wenn ich die seite dann öffne! habs jetz einfach mal mit festen werten ausprobiert, aber es geht einfach nicht! (is echt gut gemacht, dass es nur die jahre weglässt, wenn diese 0 sind! dadurch wirds wahrscheinlich echt übersichtlicher)
warum liegt es, dass es einfach ne leere seite anzeigt?

zur sicherheit hier nochmals der code (an manchen stellen musste ich ihn wegen hochkommatas in php escapen):
PHP:
    echo '<html>
    <script language="Javascript">
<!--
<html>
<head><title>Test</title>
<script type="text/javascript">
function CountdownAnzeigen(){
    MyCountdown(01,07,2009,22,09,12,\'Countdown\');
    MyCountdown(01,08,2009,21,15,30,\'Countdown2\');
    MyCountdown(01,09,2009,12,03,45,\'Countdown3\');
} 

function MyCountdown(Tag, Monat, Jahr, Stunde, Minute, Sekunde, spanid) { 
    var Jetzt = new Date(); 
    var Countdown = new Date(Jahr, Monat-1, Tag, Stunde, Minute, Sekunde); 
    var Rest = Math.floor((Countdown.getTime()-Jetzt.getTime())/1000); 
    var CountdownText = ""; 

    if(Rest > -1){
        if(Rest >= 31536000){ 
            var Jahre = Math.floor(Rest/31536000); 
            Rest = Rest-Jahre*31536000;
            CountdownText += Jahre + ":"; 
        } 
    
        if(Rest >= 86400){ 
            var Tage = Math.floor(Rest/86400); 
            Rest = Rest-Tage*86400;
            CountdownText += Tage + ":"; 
        } else if (CountdownText != "") CountdownText += "00:"; 
    
        if(Rest >= 3600){ 
            var Stunden = Math.floor(Rest/3600); 
            Rest = Rest-Stunden*3600;
            if(Stunden < 10) CountdownText += "0"; 
            CountdownText += Stunden + ":"; 
        } else if (CountdownText != "") CountdownText += "00:"; 
    
        if(Rest >= 60){ 
            var Minuten = Math.floor(Rest/60); 
            Rest = Rest-Minuten*60;
            if(Minuten < 10) CountdownText += "0"; 
            CountdownText += Minuten + ":"; 
        } else if (CountdownText != "") CountdownText += "00:"; 

        if(Rest < 10) CountdownText += "0"; 
        CountdownText += Rest;    	
    }
    
    document.getElementById(spanid).innerHTML = CountdownText; 
    window.setTimeout("MyCountdown("+Tag+","+Monat+","+Jahr+","+Stunde+","+Minute+","+Sekunde+",\'"+spanid+"\')", 1000); 
} 
</script>
</head>
<body onLoad="CountdownAnzeigen();">
	<span id="Countdown"></span><br>
	<span id="Countdown2"></span><br>
	<span id="Countdown3"></span>
</body>
</html>';

kann ichs net auch i-wie so einfügen, dass ich einfach dann mit php sage:
(kA wie ich des am besten beschreibt, deswegen sag ich mal was ich coden würde!):
PHP:
do MyCountdown( /*Werte aus der DB*/ );
//oder vielleicht folgendes?:
echo MyCountdown ( /*Werte aus der DB*/ );
wäre n ganzes stück einfacher für mich zu verstehen! noch dazu soll jeweils ein countdown mit nem text zusammen in einer tabelle in einem frame sein^^


Ah jetz hab ich meinen fehler erkannt! es war nicht immer das body onload richtig!
hat aber jemand eine idee wie ich des jetzt am besten zusammenbastel, damit es den countdown nur anzeigt (jeder countdown hat verschiedene werte), wenn das gebäude noch nicht fertig ausgebaut ist?
weil das muss ja dann schon unter body onload!
(oder kann ich das body onload noch unter den eigentlichen ausgabeort (durch span id...) schreiben???)
Ergänzung ()

Problem gelöst!
Habe es jetzt einfach so gemacht, dass alle countdownwerte in ein array geschrieben werden (mit eindeutiger span id).
Am ende des skripts mach ich einfach body onload= und füge hier die ganzen Countdownwerte etc. durch ; getrennt ein!
so bekomme ich unendlich viele verschiedene countdown genau da wo ich se brauch!


@BerniG: nochmal thx an dich. dein countdown is echt n ganzes stück besser als der andere zusammengeschusterte, und ohne den, hätt ich des glaub ich gar net hinbekommen!

mfg
to
 
Zuletzt bearbeitet:
Noch ein Tipp: Lass doch dieses "echo" weg und mach stattdessen einfach ein "?>". Wenn du dann wieder php-Code einfügen willst (z.B. innerhalb der CountdownAnzeigen()-Funktion) kannst du dann mit "<?php" wieder anfangen. Damit ersparst du dir auch das Rumhantieren mit den Anführungszeichen! Für kleinere Sachen ist echo sicher gut aber wenn man so nen ganzen Textwust hat ist das so wesentlich besser.

Außerdem ist in deinem Code das erste "<script language="Javascript">" falsch; es gehört da definitiv nicht hin.

Ich persönlich hätte halt einfach diese Sektion (in meinem Code):
Code:
function CountdownAnzeigen(){
    MyCountdown(01,07,2009,22,09,12,'Countdown');
    MyCountdown(01,08,2009,21,15,30,'Countdown2');
    MyCountdown(01,09,2009,12,03,45,'Countdown3');
}
dynamisch mit PHP erzeugt. Sollte doch eigtl. überhaupt kein Problem sein das in PHP zu generieren...also z.B. so:
PHP:
echo 'function CountdownAnzeigen(){\n';
echo 'MyCountdown('.$val['tag'].','.$val['monat'].','.$val['jahr'].','.$val['stunde'].','.$val['minute'].','.$val['sekunde'].',\''.$val['span'].'\');\n';
echo '}\n';
(und dann in ne Schleife oder was auch immer)
Wenn ein Gebäude schon fertig ist gibst du halt einfach hier nichts aus und schon ist kein Countdown mehr da. Außerdem kannst du ja die Ausgabe deiner "spans" unten im Quelltext selbst steuern; du wirst ja den HTML-Quelltext ohnehin irgendwie dynamisch erstellen müssen.
 
Zuletzt bearbeitet:
ja das das script language... zuviel ist hab ich vorhin dann auch gemerkt:D
deswegen hatt es sooft nicht funktioniert! hab ich aber gefunden als ich den ganzen quelltext mal genommen hab und alle variablen eifnach raus etc. um die fehler zu finden!

ein anderes problem war, die countdowns an verschiedenen stellen einzufügen, was aber jetz auch klappt!(dadurch das body onload auch weiter hinten als span stehen kann, gings jetz relativ einfach)

jetz bleibt noch eine frage:
kann ichs i-wie machen, dass die seite, wenn der countdown bei 0 angekommen ist, neu läd!?
entweder dass die ganze seite neu läd, aber am besten wärs wenn ich nur den frame selbst refreshen könnte.
 
Code:
if(Rest > -1){
     ...
     ...
     ...
} else window.location.reload();
Wenn dus so änderst sollte es gehen. Allerdings musst du dann in PHP sicherstellen, dass der Counter auch wirklich nicht mehr ausgegeben wird. Ansonsten macht er nämlich gleich wieder nen Refresh und wieder und wieder...
Eleganter wäre es natürlich, AJAX zu verwenden, aber das wird wohl zu kompliziert zumal man sich da wirklich ein bisschen mit Javascript auseinandersetzen muss.
 
ok hab leider erst morgen wieder zeit weiterzuprogrammieren!

jop php stellt vorher schon sicher, dass das ding nur angezeigt wird, wenn (in diesem fall) das gebäude noch nicht fertig ausgebaut ist!
weil ansonsten wird ein button angezeigt um das gebäude weiter auszubauen.

naja mal gucken, ob ich mich vllt jetz in den ferien mehr mit javascript anfreunden kann (heute die letzte abschlussprüfung geschrieben, jetzt hab ich zeit)

also für meinen zweck müsste es mit "parent.main.location.reload();" funktionieren! (der frame heißt main)!
problem ist nur dass es einfach noch nicht richtig klappt dass es dann neu läd!
 
Zuletzt bearbeitet:
Zurück
Oben