Archivlink: javarea.de Forum > JavaScript > Frage zu Countdown auf eurer Seite?
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Frage zu Countdown auf eurer Seite?

Pages: [1]

geschrieben von SixxKiller am 08.10.2006 - 13:34
Hi Leutz!

Ich hab eine Frage bezüglich eines JavaScript von eurer Seite.
Dem http://www.javarea.de/index.php3?op....&id=75
Ich würde jetzt gern diesen Countdown erweitern. Das heißt,
das ich mehrere Daten eintrage und der Counter nacheinander
die Daten runter zählt.
Ist dies möglich?????
Thanks für Eure Hilfe!

Greetz SixxKiller

geschrieben von Patrick am 08.10.2006 - 14:20
Je nachdem was du machen willst, ja es ist möglich!

geschrieben von SixxKiller am 08.10.2006 - 16:13
Wie ich oben schon beschrieben hab möchte ich mehrere
Daten eingeben können statt nur ein Datum, und das
nacheinander die Daten runter gezählt werden.
Da ich von JavaScript nicht viel Ahnung hab bräuchte ich da Hilfe.

Greetz SixxKiller

geschrieben von Micha am 08.10.2006 - 16:26
Hi,

Zitat
 Original geschrieben von SixxKiller am 08.10.2006 - 16:13
...bräuchte ich da Hilfe.


lies: die vollständige Lösung?

Wo sind Deine Bemühungen, bei denen Du Hilfe benötigst?

Micha



geschrieben von SixxKiller am 08.10.2006 - 17:25
Jut, dann werd ich erstmal zeigen inwie weit ich bin.
Das JavaScript was ich hab dürfte fast genauso sein:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
var jahr=2006, monat=09, tag=03, stunde=18, minute=00, sekunde=0; // Ziel-Datum in MEZ
	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;

			/* Allgemeines Vorgehen:
			 * Zunächst werden die vollen Jahre gezählt
			 * und anschließend der Start- und Ziel-Monat auf den jeweiligen 1. gesetzt.
			 * Nun werden erst die vollen Monate vom 1. zum 1. des Start- bzw. Ziel-Monats berechnet
			 * und danach die tatsächlichen Monatstage wieder mit einbezogen.
			 * Dieses Vorgehen vermeidet Probleme mit den verschiedenen Monatslängen.
			 * Die restliche Differenz zwischen Start- und Ziel-Zeit wird mit Tagen aufgefüllt und
			 * was dann noch übrig bleibt, in Stunden, Minuten und Sekunden ausgedrückt.*/

			// Jahre
			if(startDatum<zielDatum) {
				while(startDatum<zielDatum) {
					if(startDatum.setFullYear(startDatum.getFullYear()+1)<=zielDatum) jahre++;
				}
				startDatum.setFullYear(startDatum.getFullYear()-1);
			}

			// Restliche Tage zum Monatsende ermitteln
			var restTage=0;
			var m=startDatum.getMonth();
			if(m==1-1||m==3-1||m==5-1||m==7-1||m==8-1||m==10-1||m==12-1) restTage=31-startDatum.getDate();
			else if(m==4-1||m==6-1||m==9-1||m==11-1) restTage=30-startDatum.getDate();
			else if(m==2-1) {
				if(startDatum.getFullYear()%4==0 && (startDatum.getFullYear()%100!=0 || startDatum.getFullYear()%400==0)) restTage=29-startDatum.getDate(); // Schaltjahr
				else restTage=28-startDatum.getDate();
			}

			// Start- und Ziel-Tag merken und auf 1 setzen
			var startTag=startDatum.getDate();
			var zielTag=zielDatum.getDate();
			startDatum.setDate(1);
			zielDatum.setDate(1);

			// Monate
			if(startDatum<zielDatum) {
				while(startDatum<zielDatum) {
					if(startDatum.setMonth(startDatum.getMonth()+1)<=zielDatum) monate++;
				}
				startDatum.setMonth(startDatum.getMonth()-1);
			}

			// Tatsächlichen Start- und Ziel-Tag berücksichtigen
			if(startDatum.getMonth()==zielDatum.getMonth()) {
				if(startTag<=zielTag) startDatum.setDate(startTag);
				else {
					monate--;
					tage=restTage+1;
				}
			}
			else {
				startDatum.setMonth(startDatum.getMonth()+1);
				if(startTag>=zielTag) tage=restTage+1;
				else {
					monate++;
					startDatum.setDate(startTag);
				}
			}
			zielDatum.setDate(zielTag);

			// Tage
			restTage=Math.floor((zielDatum-startDatum)/(24*60*60*1000));
			startDatum.setTime(startDatum.getTime()+restTage*24*60*60*1000);
			tage+=restTage;

			// 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 formatiere
			(tage<10)	?	tage		="0"+tage+"t "	: tage		=tage+"t ";
			(stunden<10)	?	stunden		="0"+stunden+"h "	: stunden	=stunden+"h ";
			(minuten<10)	?	minuten		="0"+minuten+"m "	: minuten	=minuten+"m ";
			(sekunden<10) 	?	sekunden	="0"+sekunden+"s"	: sekunden	=sekunden+"s";
			
			if(monate>0)
			{
				(monate<10)	?	monate		= monate+"M "	: monate	= monate+"M ";
				document.countdownform.countdowninput.value=monate+tage+stunden+minuten+sekunden;
			}
			else
			{
				document.countdownform.countdowninput.value="In: "+tage+stunden+minuten+sekunden;	
			}

			setTimeout('countdown()',200);
		}
		// Anderenfalls alles auf Null setzen
		else
			document.reload(); 
		// document.countdownform.countdowninput.value="0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
	}


Jetzt möchte ich weitere Daten eingeben das der Countdown nach Ablauf des
ersten Datum zum nächsten weiter läuft. Den Countdown benötige ich um die
noch übrige Zeit anzuzeigen bis zum nächsten Eishockeyspiel. Damit ich beim Ablauf
nicht jedes Mal das Datum neu eingeben muss ( 52 Spiele ) möchte ich alle Daten
dem JavaScript eingeben.
Da ich wie gesagt kaum Ahnung davon hab konnte man mir bisher mit diesem Code
weiterhelfen:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
zielDaten = new Array();
zielDaten[1] = new Date(jahrA,monatA,tagA,stundeA,minuteA,sekundeA);
zielDaten[2] = new Date(jahrB,monatB,tagB,stundeB,minuteB,sekundeB);
zielDaten[3] = new Date(jahrC,monatC,tagC,stundeC,minuteC,sekundeC);
zielDaten[4] = new Date(jahrD,monatD,tagD,stundeD,minuteD,sekundeD);
zielDaten[5] = new Date(jahrE,monatE,tagE,stundeE,minuteE,sekundeE);
usw.


Soweit sogut. Ich habs mehrmals ausprobiert aber ich weiß beim besten Willen nicht
wo ich diesen Code hinzufügen muss oder welche Stelle ich ändern muss.
Ebenfalls weiß ich nicht ob der Code ausreichend ist oder ob noch was fehlt.
Ich wäre dankbar für eure Hilfe.

Greetz SixxKiller

geschrieben von Micha am 08.10.2006 - 17:57
Hi,

ein Array fängt bei Null an zu zählen - das nur zur Info.

In Deiner Funktion prüfst Du am Anfang, ob das Ereignis bereits eingetroffen ist:

HTML-Quelltext
1: 
2: 
// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
		if(startDatum<=zielDatum)  { ... }


wenn also das Ziel bereits überschritten ist - in der Vergangenheit liegt - ,tritt der Else-Zweig in Kraft (Zeile 106 aus Deinem Auszug).

in diesem Zweig musst Du die Funktion mit der neuen Zeit erneut aufrufen - kann man hier eigentlich schon von Rekursion sprechen?

Dazu musst Du das Datum selbst der Funktion übergeben und nicht global deklarieren:

HTML-Quelltext
1: 
function countdown( zielDatum ) { ... }


Dafür fallen die ersten beiden Zeilen Deines Scriptes weg. Der Aufruf erfolgt dann einfach über:

HTML-Quelltext
1: 
countdown( new Date(2006, 12-1,24,12,0,0) ); // 24.12.2006 - 12:00.00 Uhr


Nach diesem Schema würde ich auch das Array zielDaten aufbauen:

HTML-Quelltext
1: 
2: 
3: 
zielDaten[0] =  new Date(2006, 12-1,24,12,0,0);
zielDaten[1] =  new Date(2007, 12-1,24,12,0,0);
...


im else - Zweig erfolgt dann der Funktionsaufruf mit:

HTML-Quelltext
1: 
countdown( zielDaten[index] );


die Variable Index solltest Du global machen und innerhalb der Funktion hochzählen.

Versuch mal
Micha

geschrieben von SixxKiller am 08.10.2006 - 18:11
So wirklich steig ich da noch nicht durch.
Gut die ersten beiden Zeilen soll ich löschen und "function countdown( zielDatum ) { ... }"
soll ich mit "countdown( new Date(2006, 12-1,24,12,0,0) ); // 24.12.2006 - 12:00.00 Uhr" ersetzen.
Aber mit Array zielDaten und else - Zweig da steh ich wie nen Ochs vorm Tor.
Ich hoffe es ist nicht zuviel verlangt wenn Du es etwas direkter erklären könntest???

Greetz SixxKiller

geschrieben von Micha am 08.10.2006 - 18:48
Hi,

Zitat
 So wirklich steig ich da noch nicht durch.


Nach nur 15 Minuten würde ich das auch nicht!

Zitat
 Gut die ersten beiden Zeilen soll ich löschen und "function countdown( zielDatum ) { ... }"
soll ich mit "countdown( new Date(2006, 12-1,24,12,0,0) ); // 24.12.2006 - 12:00.00 Uhr" ersetzen.


Nein! Du sollst der Funktion ein Eingangsargument übergeben. Dieses Eingangsargument ist Dein Date-Objekt

HTML-Quelltext
1: 
function countdown( zielDatum ) { ... }


ist eine Funktion, die einen Parameter erwartet.

Funktionen werden mit ihren Namen aufgerufen. Da die Funktion einen Eingangsparameter erwartet, ist dieser zu übergeben:

HTML-Quelltext
1: 
countdown( new Date(2006, 12-1,24,12,0,0) );


Zitat
 Ich hoffe es ist nicht zuviel verlangt wenn Du es etwas direkter erklären könntest???

Nein, wenn Du eine Frage hast, mach ich das gern - vollständige Lösungen bekommst Du von mir nicht!

LG Micha

geschrieben von SixxKiller am 08.10.2006 - 19:04
Nein, eine Komplettlösung will ich auch nicht. Für mich ist es nur recht verwirrend.
Also das Eingangsargument kommt als erstes in den JavaScript. Richtig?
Setz ich jetzt das * countdown( new Date(2006, 12-1,24,12,0,0) );*
direkt danach ein?
Sorry für die vielleicht dummen Fragen.

Greetz SixxKiller

geschrieben von Micha am 08.10.2006 - 19:31
Hallo,

versuchen wir es an einem einfachen Beispiel zunächst.

HTML-Quelltext
1: 
2: 
3: 
var a = 4;
var b = a+5;
window.alert( b );


Ich denke Du erkennst, dass das alert einen Wert von 9 liefert, da lediglich die beiden Zahlen 5 und 4 addiert wurden. Interessant ist, das die Zahl 4 in einer Variable - Namens a - steht.

will man nun verschiedene Werte mit 5 addieren, so muß man entweder a immerzu ändern oder n-neue Variablen einführen - das erscheint auch logisch?

Dem kann man entgegentreten mit einer Funktion:

HTML-Quelltext
1: 
2: 
3: 
4: 
function addiere (a_in) {
  var b = 5 + a_in;
  window.alert(b);
}


diese Funktion erwartet ein Argument, das ich mal a_in genannt habe. Innerhalb dieser Funktion wird zu a_in die Zahl 5 addiert und b zugewiesen und letztlich ausgegeben.
Eine Funktion ruft man mit dessen Namen auf und übergibt dieser die benötigen Argumente - hier also eine Zahl.

So könnte der Aufruf aussehen
HTML-Quelltext
1: 
addiere(10);

als Ergebnis bekommt man 15.

Du solltest Dich zumindest mit den Grundlagen befassen - dazu gehört der Aufbau einer Funktion und dessen Aufruf.

Du besitzt bereits eine Funktion, die Du lediglich erweitern musst.

Micha

geschrieben von SixxKiller am 21.10.2006 - 15:47
Zuerst nochmal danke für dein Beispiel Micha.
Ich hab zwar dein Beispiel verstanden und kann es nachvoll ziehen aber
wie ich es für das Script anwende da steh ich wieder auf dem Schlauch.
Gibt es vielleicht eine Möglichkeit sowas für ganz Dumme zu erklären???

Greetz SixxKiller


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.