condown script problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anforderung
beliebigen input
code
countdown
dank
datum
feld
forum
input
korrektur
mache
obigem beispiel
textfeld
unterschiedliche zeiten
url
vergessen
vorbereiten
weben
wert zeigen
zeile
-
Hallo an alle!
Ich habe condown script:
<html> <head> <title>Datum-Countdown mit JavaScript</title> <script language="JavaScript"> // Ziel-Datum in MEZ var jahr=2011, monat=7, tag=01, stunde=18, minute=00, sekunde=00; var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde); function countdown() { startDatum=new Date(); // Aktuelles Datum // Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist if(startDatum<zielDatum) { var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0; // Jahre while(startDatum<zielDatum) { jahre++; startDatum.setFullYear(startDatum.getFullYear()+1); } startDatum.setFullYear(startDatum.getFullYear()-1); jahre--; // Monate while(startDatum<zielDatum) { monate++; startDatum.setMonth(startDatum.getMonth()+1); } startDatum.setMonth(startDatum.getMonth()-1); monate--; // Tage while(startDatum.getTime()+(24*60*60*1000)<zielDatum) { tage++; startDatum.setTime(startDatum.getTime()+(24*60*60*1000)); } // Stunden stunden=Math.floor((zielDatum-startDatum)/(60*60*1000)); startDatum.setTime(startDatum.getTime()+stunden*60*60*1000); // Minuten minuten=Math.floor((zielDatum-startDatum)/(60*1000)); startDatum.setTime(startDatum.getTime()+minuten*60*1000); // Sekunden sekunden=Math.floor((zielDatum-startDatum)/1000); // Anzeige formatieren (jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, "; (monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, "; (tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, "; (stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, "; (minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und "; if(sekunden<10) sekunden="0"+sekunden; (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde"; document.countdownform.countdowninput.value= jahre+monate+tage+stunden+minuten+sekunden; setTimeout('countdown()',200); } // Anderenfalls alles auf Null setzen else document.countdownform.countdowninput.value= "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden"; } </script> </head> <body onload="countdown()"> <form name="countdownform"> <p> <input size="75" name="countdowninput"> </p> </form> </body> </html>
ein condown script, welches ich aber mehrfach verwenden möchte.
aber immer wenn ich dies untereinander setze ist ein condown ohne inhalt!
denke das ich etwas umnennen muss?
aber was und wo?
und bitte keine frame und includet lösungen!
danke für eure hilfe!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo tshg,
wenn Du den Input-Feldern unterschiedliche Namen verpasst und jedem den Wert extra zuweist, dann funktioniert es:
<html> <head> <title>Datum-Countdown mit JavaScript</title> <script language="JavaScript"> // Ziel-Datum in MEZ var jahr=2011, monat=7, tag=01, stunde=18, minute=00, sekunde=00; var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde); function countdown() { startDatum=new Date(); // Aktuelles Datum // Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist if(startDatum<zielDatum) { var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0; // Jahre while(startDatum<zielDatum) { jahre++; startDatum.setFullYear(startDatum.getFullYear()+1); } startDatum.setFullYear(startDatum.getFullYear()-1); jahre--; // Monate while(startDatum<zielDatum) { monate++; startDatum.setMonth(startDatum.getMonth()+1); } startDatum.setMonth(startDatum.getMonth()-1); monate--; // Tage while(startDatum.getTime()+(24*60*60*1000)<zielDatum) { tage++; startDatum.setTime(startDatum.getTime()+(24*60*60*1000)); } // Stunden stunden=Math.floor((zielDatum-startDatum)/(60*60*1000)); startDatum.setTime(startDatum.getTime()+stunden*60*60*1000); // Minuten minuten=Math.floor((zielDatum-startDatum)/(60*1000)); startDatum.setTime(startDatum.getTime()+minuten*60*1000); // Sekunden sekunden=Math.floor((zielDatum-startDatum)/1000); // Anzeige formatieren (jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, "; (monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, "; (tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, "; (stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, "; (minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und "; if(sekunden<10) sekunden="0"+sekunden; (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde"; document.countdownform.countdowninput1.value= jahre+monate+tage+stunden+minuten+sekunden; document.countdownform.countdowninput2.value= jahre+monate+tage+stunden+minuten+sekunden; setTimeout('countdown()',200); } // Anderenfalls alles auf Null setzen else { document.countdownform.countdowninput1.value= "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden"; document.countdownform.countdowninput2.value= "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden"; } } </script> </head> -
habe das mal ausprobiert,
und irgendwie geht das nicht?
auch bei den code den du mir vorbereitet hast,
gib er mir gar keinen wert raus?
könnten sie mir bitte ein beispiel vorbereiten?
oder mir die zeilen makieren die zu ändern sind?
währe echt nett!
-
Hallo tshg,
'sie' brauchst Du hier im Forum wirklich nicht zu sagen. 'du' reicht hier vollkommen.
Und ja Du hast recht, da sind mir wohl beim kopieren ein paar Zeilen verloren gegangen.
Also hier noch einmal:
Ich habe die geänderten Stellen jetzt mal etwas vom Rest abgesetzt.<html> <head> <title>Datum-Countdown mit JavaScript</title> <script language="JavaScript"> // Ziel-Datum in MEZ var jahr=2011, monat=7, tag=01, stunde=18, minute=00, sekunde=00; var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde); function countdown() { startDatum=new Date(); // Aktuelles Datum // Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist if(startDatum<zielDatum) { var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0; // Jahre while(startDatum<zielDatum) { jahre++; startDatum.setFullYear(startDatum.getFullYear()+1); } startDatum.setFullYear(startDatum.getFullYear()-1); jahre--; // Monate while(startDatum<zielDatum) { monate++; startDatum.setMonth(startDatum.getMonth()+1); } startDatum.setMonth(startDatum.getMonth()-1); monate--; // Tage while(startDatum.getTime()+(24*60*60*1000)<zielDatum) { tage++; startDatum.setTime(startDatum.getTime()+(24*60*60*1000)); } // Stunden stunden=Math.floor((zielDatum-startDatum)/(60*60*1000)); startDatum.setTime(startDatum.getTime()+stunden*60*60*1000); // Minuten minuten=Math.floor((zielDatum-startDatum)/(60*1000)); startDatum.setTime(startDatum.getTime()+minuten*60*1000); // Sekunden sekunden=Math.floor((zielDatum-startDatum)/1000); // Anzeige formatieren (jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, "; (monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, "; (tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, "; (stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, "; (minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und "; if(sekunden<10) sekunden="0"+sekunden; (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde"; //--- ÄNDERUNGEN ANFANG ---// document.countdownform.countdowninput1.value= jahre+monate+tage+stunden+minuten+sekunden; document.countdownform.countdowninput2.value= jahre+monate+tage+stunden+minuten+sekunden; setTimeout('countdown()',200); } // Anderenfalls alles auf Null setzen else { document.countdownform.countdowninput1.value= "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden"; document.countdownform.countdowninput2.value= "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden"; } //--- ÄNDERUNGEN ENDE ---// } </script> </head> <body onload="countdown()"> <form name="countdownform"> <p> <!-- ÄNDERUNGEN ANFANG --> <input size="75" name="countdowninput1"> <input size="75" name="countdowninput2"> <!-- ÄNDERUNGEN ENDE --> </p> </form> </body> </html>
Gemacht habe ich folgendes:
- Das erste Input-Feld wurde zu 'countdowninput1' umbenannt.
- Es wurde ein zweites Input-Feld mit dem Namen 'countdowninput2' erstellt.
- Im Javascript wurde das setzen des Wertes an den neuen Namen angepasst.
- Die gleiche Zeile wurde ein zweites mal für das zweite Input-Feld eingefügt. -
sorry!
wenn du mir noch so freundlich wärst,
zu schreiben wie ich zwei unterschiedliche zeiten eingeben kann,
wäre mein glück perfekt!
da im script zwar jetzt zwei anzeigen sind,
aber immer den selben wert zeigen.
oder übersehe ich da etwas?
vielen vielen dank für deine nette hilfe!!!!
-
tshg schrieb:
...
wenn du mir noch so freundlich wärst,
zu schreiben wie ich zwei unterschiedliche zeiten eingeben kann,
wäre mein glück perfekt!
...
Hallo tshg,
dann will ich Dein Glück mal perfektionieren
Ich habe die Sache mal überarbeitet oder besser gesagt neu implementiert, damit sie Deinen Anforderungen genügt:
Es gibt jetzt eine Funktion 'setzeWartezeit()', die die Datumsdifferenz berechnet und das Ergebnis in ein Textfeld schreibt. Diese kannst Du beliebig oft und mit beliebigen Input-Feldern und Zieldaten aufrufen. In obigem Beispiel wird sie zweimal aufgerufen. Das erste Argument ist die Referenz auf ein Textfeld und das zweite Argument das Zieldatum.<html> <head> <title>Datum-Countdown mit JavaScript</title> <script language="JavaScript"> // Ziel-Datum in MEZ, die Monate gehen in Javascript von 0 bis 11! var zielDatum1=new Date(2011,5,15,12,30,25); var zielDatum2=new Date(2012,3,18,9,21,59); // Setze den Text eines Textfeldes auf die übrige Wartezeit // textfeld: Referenz auf das Textfeld (Input-Element) // zieldatum: das Zieldatum als Date-Objekt function setzeWartezeit(textfeld, zieldatum) { // hole das aktuelle Datum var now = new Date(); // berechne die Differenz zum Zieldatum var differenz = Math.floor((zieldatum.getTime()-now.getTime())/1000); if(differenz <= 0) // Zieldatum vorbei: { textfeld.value = "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden"; } else // Zieldatum in der Zukunft: { var jahre, monate, tage, stunden, minuten, sekunden; // berechne die Differenzen der Datumskomponenten: jahre = zieldatum.getYear() - now.getYear(); monate = zieldatum.getMonth() - now.getMonth(); tage = zieldatum.getDate() - now.getDate(); stunden = zieldatum.getHours() - now.getHours(); minuten = zieldatum.getMinutes() - now.getMinutes(); sekunden = zieldatum.getSeconds() - now.getSeconds(); // korrigiere negative Differenzen: if(sekunden < 0) { minuten -= 1; sekunden += 60; } if(minuten < 0) { stunden -= 1; minuten += 60; } if(stunden < 0) { tage -= 1; stunden += 24; } if(tage < 0) { monat -= 1; switch(now.getMonth()) { case 0,2,4,6,7,9,11: tage += 31; break; case 3,5,8,10: tage += 30; break; default: if(now.getFullYear()%4 == 0) tage += 29; else tage += 28; break; } } if(monate < 0) { jahre -= 1; monate += 12; } // setze den Text zusammen: textfeld.value = jahre + " Jahre, " + monate + " Monate, " + tage + " Tage, " + stunden + " Stunden, " + minuten + " Minuten und " + sekunden + "Sekunden"; } } function countdown() { // setze die Wartezeiten in das jeweilige Textfeld: setzeWartezeit(document.countdownform.countdowninput1, zielDatum1); setzeWartezeit(document.countdownform.countdowninput2, zielDatum2); // setze den nächsten Timeout: setTimeout('countdown()', 250); } </script> </head> <body onload="countdown()"> <form name="countdownform"> <p> <input size="75" name="countdowninput1"> <input size="75" name="countdowninput2"> </p> </form> </body> </html>
Ich hoffe ich habe alles gut genug kommentiert.
Edit: Ich hatte die Tageskorrektur vergessen.
Edit2: Korrektur der Korrektur (habe vergessen, dass die Monate ja von 0 bis 11 gehen.)
Beitrag zuletzt geändert: 14.6.2011 22:20:38 von darkpandemic -
klapt super!
danke für deine große mühe!
echt klasse arbeit!
wenn ich mir den code so ansehe,
wäre ich da nie darauf gekommen.
und auch andere foren wahren mit meiner bitte,
bzw. frage komplett überfordert!
dank an dich und an lima city,
ohne dies nicht möglich gewesen währe!
-
Danke fabo,
jetzt weis ich wieder, warum ich mit Javascript schon lange nichts mehr mache.
Da bin ich mittlerweile doch schon etwas zu 'antik' für. -
darkpandemic schrieb:
Danke fabo,
jetzt weis ich wieder, warum ich mit Javascript schon lange nichts mehr mache.
Da bin ich mittlerweile doch schon etwas zu 'antik' für.
So war das nicht gemeint
Aber in Zeiten der ganzen Frameworks kann man ein solches auch ruhig benutzen :)
EDIT:
Ich habe mal eine neue Version hochgeladen. Das Teil ist ziemlich mächtig, man sollte sich also das beigefügte Javascript anschauen.
Beitrag zuletzt geändert: 17.6.2011 18:50:19 von fabo -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
