Countdown-Funktion
Max
- javascript
0 David Tibbe0 oesi500 Maxx0 Sven Rautenberg0 Max0 Sven Rautenberg0 Max0 Max0 Sven Rautenberg0 Max
Hallo! Ich würde gerne eine Javascript-Funktion erstellen, die die Zahlen 1 bis 10 im 1-Sekunden-Takt aufzählt und hinschreibt.
Hier mein Anfang, der aber leider nicht funktioniert. Hab auch schon die Suche zu Rate gezogen, was aber leider nicht sehr viel geholfen hat. Ich wäre für jede Hilfe dankbar.
Also, hier mein Versuch:
<BODY>
<script type="text/javascript">
<!--
function Schleife()
{
var i = 1;
do
{
setTimeout('Countdown(i)', 1000);
i++;
}
while(i<=10);
function Countdown(i2)
{
document.write(i2 + '<br>');
}
}
//-->
</script>
<a href="javascript:Schleife()">Test</a>
</BODY>
Der Fehler sagt, dass "i undefiniert ist"...Meiner Ansicht nach liegt das daran, dass die Funktion "Countdown()" in Timeout keine Werte übergeben kann...weiß aber nicht ob's so ist und warum das so ist.
Danke für eure Hilfe
MfG
Max
Hallo
Der Fehler sagt, dass "i undefiniert ist"...Meiner Ansicht nach liegt das daran, dass die Funktion "Countdown()" in Timeout keine Werte übergeben kann...weiß aber nicht ob's so ist und warum das so ist.
Das schon, nur nicht so. Soweit ich mich richtig entsinne, muss es
setTimeout('Countdown(' + i + ')', 1000);
heißen. Ansonsten frag nocheinmal kurz das Archiv.
<a href="javascript:Schleife()">Test</a>
Nein, ein solcher Link ist keinesfalls schön. Lies ein wenig im Archiv dazu und ändereihn schnell in:
<a href="#" onCLick="Schleife(); retur false;">
Grüße
David
Hallo Max,
versuch mal das:
<script language="Javascript">
var i = 10;
function Countdown(){
document.cform.cnt.value=i;
if (i < 1){
window.clearInterval(cobj);
}
i = i -1;
}
var cobj = window.setInterval("Countdown()", 1000);
</script>
<br>
<div align="center">
<form name="cform">
<input name="cnt" size="3">
</form>
</div>
Grüße Oesi
hallo Max
Hallo! Ich würde gerne eine Javascript-Funktion erstellen, die die Zahlen 1 bis 10 im 1-Sekunden-Takt aufzählt und hinschreibt.
<BODY>
function Schleife()
document.write(i2 + '<br>');
<a href="javascript:Schleife()">Test</a>
</BODY>
Ich habe für die Übersichtlichkeit die unwesentlichen Zweilen rausgelöscht.
Auch ohne i und setTimeout kann es nicht funktionieren. Denn:
Ausnahmslos jeder (visuelle) Browser bringt die Inhalte zwischen <body> und </body> auf dein Ausgabegerät. Ab diesem Zeitpunkt schlagen jegliche Ausgabeversuche mittels document.write("was auch immer ...") fehl. Möchtest du im nachhinein dynamisch Text ändern musst du dich mit http://selfhtml.teamone.de/javascript/objekte/document.htm#create_element beschäftigen. Oder, etwas einfacher, ein Formularelement manipulieren: document.DeinFormular.Textfeld.value=".."
HTH
Grüße, Maxx
Moin!
<script type="text/javascript">
<!--
function Schleife()
{
var i = 1;
do
{
setTimeout('Countdown(i)', 1000);
Die Methode setTimeout läuft sofort weiter! Du stellst hier also in schneller Abfolge genau 10 Timeouts in die Warteschlange, die _alle_ nach 1000 Millisekunden abgearbeitet werden, aber nicht nach jeweils einer Sekunde Wartezeit. Sowas ist für einen Countdown aber wichtig.
Und zweitens rufst du die in den Anführungsstrichen angegebene Funktion auf. Die Funktion lautet: Countdown(i).
Nun ist es aber leider so, dass keine globale Variable i existiert, weshalb du sie auch nicht an die Funktion übergeben kannst. Stattdessen wäre es viel besser, wenn du eine fest angegebene Zahl an die Funktion übergibst.
Also: setTimeout('Countdown('+i+')',1000); Das generiert den Code, um Countdown(1) etc. aufzurufen.
Bleibt noch das Problem der Gleichzeitigkeit. Und das löst sich entweder mit oesi50's Code, oder so:
for (i=1; i<=10; i++)
{
setTimeout('Countdown('+i+')', 1000*i);
}
Damit werden in schneller Reihenfolge Timeout-Funktionen gesetzt, die in 1*1000, 2*1000, 3*1000... Millisekunden aufgerufen werden.
function Countdown(i2)
{
document.write(i2 + '<br>');
}
Diese Funktion kann so bleiben. Allerdings: Warum verwendest du als Variable "i2"? Du kannst einfach i nehmen, das ist dann eine lokale Variable. Da du keine globale Variable gleichen Namens verwendest, stört das absolut nicht.
Bedenke noch, dass dein document.write() die Inhalte des vorher geladenen Dokuments löscht! Dein Javascript wird also auch gelöscht und verschwindet. Möglicherweise erzeugt das deshalb spontan weitere Fehlermeldungen. Zum Testen eignet sich besser ein Formularfeld, dem du den Wert zuweist. Dann kommt dein Javascript nicht abhanden.
- Sven Rautenberg
Danke, jetzt klappt es. Wenn ich jetzt das ganze rückwärtslaufen lassen möchte, hätte ich geschätzt, dass es folgendermaßen klappen müsste:
<script type="text/javascript">
<!--
function SchleifeDown()
{
var StartDown = document.formular.StartDown.value;
var EndDown = document.formular.EndDown.value;
var i;
for (i=10; i>=0; i--)
{
setTimeout('Countdown('+i+')', 1000*i);
}
}
function Countdown(i)
{
document.formular.CountDown.value = i;
}
//-->
</script>
<form name="formular">
Startwert: <input type="text" name="StartDown" size="2">
Endwert: <input type="text" name="EndDown" size="2">
<input type="button" value="Count-Down!" onClick="SchleifeDown()">
<input type="text" name="CountDown" readonly>
</form>
Aber irgendwie zählt der immer noch hoch!?! Trotz "i--".
Weiß jemand wie's geht?
Achja, btw, warum ist "<a href="javascript:...>" schlecht?
Danke!
MfG Max
Moin!
Danke, jetzt klappt es. Wenn ich jetzt das ganze rückwärtslaufen lassen möchte, hätte ich geschätzt, dass es folgendermaßen klappen müsste:
Und wieder reingefallen. :)
Mache dir klar, welche Funktionen mit welcher Ausführungszeit aufgerufen werden!
Es ist egal, ob du folgenden Zeitplan aufstellst:
Um 1 Uhr: Schreibe "1"
Um 2 Uhr: Schreibe "2"
Um 3 Uhr: Schreibe "3"
Oder ob du folgenden Plan machst:
Um 3 Uhr: Schreibe "3"
Um 2 Uhr: Schreibe "2"
Um 1 Uhr: Schreibe "1"
Was du brauchst:
Um 1 Uhr: Schreibe "3"
Um 2 Uhr: Schreibe "2"
Um 3 Uhr: Schreibe "1"
Also mußt du (wenn wir im Beispiel mal von der Zählung 3 bis 1 ausgehen)
noch was rechnen:
Du zählst von 1 bis 3 für dir Uhrzeit, du willst, wenn du 1 Uhr hast, die 3 ausgeben, und wenn du 3 Uhr hast, willst du die 1 ausgeben.
Das funktioniert, wenn du die Uhr jeweils von 4 abziehst, um die Ausgabe zu berechnen:
Um 1 Uhr: Schreibe "4-1" =3
Um 2 Uhr: Schreibe "4-2" =2
Um 3 Uhr: Schreibe "4-3" =1
- Sven Rautenberg
Uhh. Ist natürlich etwas umständlich. Was bringt dann überhaupt "i--"?
Danke schonmal!
MfG
Max
Hallo. Ich bins mal wieder. Ich möchte euch jetzt echt nicht mit kleinen Problemchen auf die Nerven gehen, aber ich hätte gerne noch eine Kleinigkeit gewusst.
Ich habe mittlerweile das Countup/down-Zeugs in einem HTML-Dok. etwas strukturiert und hochgeladen.
Es ist jetzt hier: http://www.mastershrimp.com/test/testdaten/Countdowntest.html
Wie ihr seht gibt es dort eine Eingabe, mit der man sagen kann, ab wann und bis wohin gezählt werden soll. Das klappt auch wenn man von 1 bis x zählen lässt. Wenn man als Startwert "2" eingibt, dauert es erst etwas bis es läuft, und alles über 3 beginnt nie.
Woran könnte das liegen? Ich glaube nämlich dass das früher (vor dem "Strukturieren") mal geklappt hat - nur ich seh den Fehler irgendwie nicht.
Vielen Dank
Gruß
Max
Moin!
Es ist jetzt hier: http://www.mastershrimp.com/test/testdaten/Countdowntest.html
Das ist nett und funktioniert bei mir prima.
Wie ihr seht gibt es dort eine Eingabe, mit der man sagen kann, ab wann und bis wohin gezählt werden soll. Das klappt auch wenn man von 1 bis x zählen lässt. Wenn man als Startwert "2" eingibt, dauert es erst etwas bis es läuft, und alles über 3 beginnt nie.
Dein Denkfehler ist hierbei wieder, dass du die Zahlen mit den Zeiten verknüpfst.
Zuerst: Auch mit Startwert 3, 4 oder höher funktioniert es.
Aber dein Zeitplan ist natürlich nicht so, wie du das erwartest:
Du läßt die Anzeige um 1 Uhr und 2 Uhr aus und beginnst um 3 Uhr. Logisch, dass du da erstmal eine lange Zeit lang warten mußt, bis was passiert.
Woran könnte das liegen? Ich glaube nämlich dass das früher (vor dem "Strukturieren") mal geklappt hat - nur ich seh den Fehler irgendwie nicht.
Wenn du gerne eine universelle Lösung für beliebige Countdowns/ups haben willst, ist der Ansatz, alle Timeouts auf einmal zu erstellen, sowieso nicht ideal. Die Ressourcen des Browsers sind begrenzt, die sollte man nicht unbedingt überlasten.
Was die unnötige Verzögerung angeht: Du muß dafür sorgen, dass ein Zählen von 3 bis 6 nicht erst um 3 Uhr beginnt, sondern schon um 1 Uhr. Also hängt die Zeit nicht direkt von der Zahl ab, sondern soll immer um 1 Uhr beginnen. Wenn die Zahl 1 um 1 Uhr angezeigt werden soll, ist die Abhängigkeit von Uhr und Zahl: Zahl = Uhr + 0.
Wenn um 1 Uhr die Zahl 3 angezeigt werden soll, ist die Abhängigkeit: Zahl = Uhr + 2.
Entsprechend kannst du die Abhängigkeitszahl errechnen, indem du Startzahl - 1 rechnest.
Logischerweise darfst du dann nicht mehr von 1 Uhr bis 6 Uhr zählen, sondern nur noch von 1 Uhr bis 3 Uhr. Also von 1 Uhr bis (ende - start - 1) Uhr.
Dein gesamter Versuch, das Skript universell zu machen, erfordert solche mathematischen Überlegungen, die ja im Prinzip wirklich simpel sind. Eine gute Note in Mathe wäre da hilfreich, zumindest aber das Vorhandensein von Papier und Bleistift, um sich die Abhängigkeiten mal genau zu überlegen.
Ach ja: Der Alternative Ansatz dazu wäre, einfach regelmäßig eine Funktion aufzurufen und darin eine globale Variable entsprechend zu manipulieren. Dann kann man sich die ganze Rechnerei größtenteils sparen. Das ist dann eher der Ansatz von oesi50.
- Sven Rautenberg
Dein gesamter Versuch, das Skript universell zu machen, erfordert solche mathematischen Überlegungen, die ja im Prinzip wirklich simpel sind. Eine gute Note in Mathe wäre da hilfreich,
Die hätte ich (stehe immo "1") ;). Wie du siehst bin ich noch Schüler...
Ach ja: Der Alternative Ansatz dazu wäre, einfach regelmäßig eine Funktion aufzurufen und darin eine globale Variable entsprechend zu manipulieren. Dann kann man sich die ganze Rechnerei größtenteils sparen. Das ist dann eher der Ansatz von oesi50.
Hmhm. Ok. Ich glaub ich lass es erstmal so (ohne Startzeit). Würde jetzt denk ich zu aufwendig werden - und da alles eh nur ein Test meiner JS-Kenntnisse war und erstmal nicht richtig umgesetzt werden soll, denke ich, dass es bis hierhin reicht.
Ok. Vielen, vielen Dank. Habt mir echt geholfen! Das Problem bei JS-Fehlern ist, dass man genaustens wissen muss, was die Funktion wie und warum macht...das erfordert ziemlich viel Hintergrundwissen/Versuche. Hier kann man das meiner Meinung nach am besten lernen.
MfG
Max