JS Countdown - und bei 0? im Forum Homepage Hosting

Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » JS Countdown - und bei... - 21 Nov 2024

Antworten

im Forum für Webhosting Homepage gefunden:

JS Countdown - und bei 0?

Lewi

Quasselstrippe
Threadstarter

Beiträge: 287

Hi,

ich benutze auf meiner Homepage zur Zeit folgenden JS-Countdown:

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:

function getTime() {
c1 = new Image(); c1.src = "countdown/1c.gif";
c2 = new Image(); c2.src = "countdown/2c.gif";
c3 = new Image(); c3.src = "countdown/3c.gif";
c4 = new Image(); c4.src = "countdown/4c.gif";
c5 = new Image(); c5.src = "countdown/5c.gif";
c6 = new Image(); c6.src = "countdown/6c.gif";
c7 = new Image(); c7.src = "countdown/7c.gif";
c8 = new Image(); c8.src = "countdown/8c.gif";
c9 = new Image(); c9.src = "countdown/9c.gif";
c0 = new Image(); c0.src = "countdown/0c.gif";
Cc = new Image(); Cc.src = "countdown/Cc.gif";
now = new Date();

later = new Date("Aug 18 2004 12:30:01");

days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}

Zur Zeit entsteht, sobald die Zielzeit erreicht ist, ein "Fehler auf der Seite" und der Countdown fängt an, wildes Zeug anzuzeigen. Kann mir jemand sagen, wie ich den genannten Code derart erweitern kann, dass ich für Restzeit = 0 eigenen JavaScript-Code einsetzen kann? Würde mir sehr helfen.

Danke

Lewi

---
Lewi = ehemals the_doc

Profil Website Editieren Zitieren

sondermuelli

Quasselstrippe

Beiträge: 363

beim aufruf des setTimeout musst du halt vergleichen ob now == later ist. wenn dies der fall ist lässt du das script in einen else-zweig springen.

Edit: der vergleich muss natürlich now <= later sein. und damit du die variablen now und later überhaupt vergleichen kannst schreibst du das am besten so:

1: 
2: 
3: 
4: 
5: 
6: 
7:

if (now.toGMTString() <= later.toGMTString()) {
	newtime = window.setTimeout("getTime();", 1000);
}
else {
	// Der Code der ab Erreichen des Datums ausgeführt werden soll
}

---
wer hilft mir beim geschirr spülen?

Diese Nachricht wurde geändert von: sondermuelli

Profil E-Mail Website Editieren Zitieren

Lewi

Quasselstrippe
Threadstarter

Beiträge: 287

Prima, danke für die Lösung. Werd es bald ausprobieren.

---
Lewi = ehemals the_doc

Profil Website Editieren Zitieren

Lewi

Quasselstrippe
Threadstarter

Beiträge: 287

Hi,

ich habe den Code jetzt folgendermaßen gestaltet:

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:

function getTime() {
c1 = new Image(); c1.src = "countdown/1c.gif";
c2 = new Image(); c2.src = "countdown/2c.gif";
c3 = new Image(); c3.src = "countdown/3c.gif";
c4 = new Image(); c4.src = "countdown/4c.gif";
c5 = new Image(); c5.src = "countdown/5c.gif";
c6 = new Image(); c6.src = "countdown/6c.gif";
c7 = new Image(); c7.src = "countdown/7c.gif";
c8 = new Image(); c8.src = "countdown/8c.gif";
c9 = new Image(); c9.src = "countdown/9c.gif";
c0 = new Image(); c0.src = "countdown/0c.gif";
Cc = new Image(); Cc.src = "countdown/Cc.gif";
now = new Date();

later = new Date("Aug 19 2004 19:20:01");

if (now.toGMTString() <= later.toGMTString()) {

days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);

if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
} else {
takeoff();
}

}

Die Funktion takeoff soll ausgeführt werden, wenn die Zeit erreicht ist. Es funktioniert insofern, dass wenn die Seite nach der angegeben Zeit aufgerufen wird, takeoff() aufgerufen wird. Läuft die Zeit allerdings aus, während man sich die Seite anschaut, passiert dies nicht und es gibt einen Syntax-Fehler.

Hast du eine Idee, wie man das noch umgehen könnte?

Gruß

Lewi

---
Lewi = ehemals the_doc

Profil Website Editieren Zitieren

Lewi

Quasselstrippe
Threadstarter

Beiträge: 287

Hi,

habs hinbekommen. In

1:	if (now.toGMTString() <= later.toGMTString()) {

habe ich das "<=" durch "<" ersetzt. Der Countdown hat genau eine Schleife zu viel gemacht und ist dann dadurch ausgestiegen.

Vielen Dank nochmal für die Hilfe.

Gruß

Lewi

---
Lewi = ehemals the_doc

Profil Website Editieren Zitieren

sondermuelli

Quasselstrippe

Beiträge: 363

habs hinbekommen. In

1:	if (now.toGMTString() <= later.toGMTString()) {

habe ich das "<=" durch "<" ersetzt. Der Countdown hat genau eine Schleife zu viel gemacht und ist dann dadurch ausgestiegen.

hättest du nur die anweisung

1:	newtime = window.setTimeout("getTime();", 1000);

von der if-abfrage abhängig gemacht, hätte es auch mit "<=" funktioniert. aber so wie du es jetzt gelöst hast, ist es ja genauso "richtig".

---
wer hilft mir beim geschirr spülen?

Profil E-Mail Website Editieren Zitieren

Lewi

Quasselstrippe
Threadstarter

Beiträge: 287

Das hab ich vorher probiert. Sobald aber nur noch 0 Sekunden übrig sind, bleibt er schon im Code vor

1:	newtime = window.setTimeout("getTime();", 1000);

hängen. Aber wie gesagt, jetzt ist alles o.k. Kannst gerne nächste Woche Freitag auf meiner Homepage zuschauen... ;)

---
Lewi = ehemals the_doc

Profil Website Editieren Zitieren

rushki

Pixelschubser

Beiträge: 1

Hallo,

ich habe den Code mit den paar extra Zeilen angepasst, aber es gibt immer noch ein Scriptfehler, wenn das Datum erreicht worden ist. Was habe ich falsch gemacht?

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:







Countdown zum Release von Die Siedler: Das Erbe der Könige






Tag(e)


Stunde(n)


Minute(n)


Sekunde(n)

Profil Editieren Zitieren

Ori

Mausakrobat

Beiträge: 162

1: 
2: 
3: 
4: 
5:

Error: missing } after function body
Source File: http://192.168.0.1/~philipp/rushki.htm
Line: 78, Column: 11
Source Code:
//  End -->

Nach Korrektur und Herunterlaufenlassen des Zählers kam das hier:

1: 
2: 
3: 
4: 
5:

Error: missing ; before statement
Source File: http://192.168.0.1/~philipp/rushki.htm
Line: 59, Column: 4
Source Code:
c-1.src

Dann habe ich mir den Quelltext mal genauer angesehen. Geschickter kannst Du die Zuweisung mit einen Array von Image-Objekten anstellen. Dann wird einfach der Array-Index übergeben und Du kannst Dir den Umstand mit eval() sparen:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12:

var imgarr = new Array(10);
for (var i = 0; i < 10; i++)
{
   imgarr[i] = new Image();
   imgarr[i].src = '~/' + i + '.gif';
}

...

document.images.h.src = imgarr[secondsRound].src;

Diese Variable sollte global definiert sein, nicht lokal, damit sie nicht jedes Mal neu geschrieben werden muss.

Du solltest am Anfang der Funktion prüfen, ob der Zeitpunkt erreicht oder gar überschritten wurde, damit keine Fehler mehr auftreten, weil eval() "c-1" berechnen will oder der Arrayindex zu klein wird (je nach Variante).

Ist Dir ein Körper nicht genug?

setInterval()

Profil E-Mail Website Editieren Zitieren

Chris007

Pixelschubser

Beiträge: 1

Hi, ich hab noch nich so viel Ahnung von JS und hab das gleiche Prob wie Lewi, mit den Unterschied das es bei ihm klappt *g*

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:

So sieht bei mir der Code aus, aber der fängt nich an zu Zählen

Profil Editieren Zitieren

Ori

Mausakrobat

Beiträge: 162

onload.

1:

DendE PhisH stinkt... wirklich. So geht es richtig:

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:

Der Code ist kommentiert... Ansonsten ist es einfache Mathematik.

Die Ziffern-s brauchen jetzt die ids "z1" bis "z9", z1 ist die Hunderterstelle der Tage, z9 die Einerstelle der Sekunden. (Nicht die Doppelpunke mit id versehen!)
Namen sind nicht mehr nötig.

Funktionierendes Beispiel: rushki.htm (solange mein Rechner läuft).

Diese Nachricht wurde geändert von: Ori

Profil E-Mail Website Editieren Zitieren

	Antworten

Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » JS Countdown - und bei...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - JS Countdown - und bei 0? im Forum Homepage Hosting	Antworten	Letztes Posting
Unvorhersehbare Layout-Verschiebungen auf meiner Seite - Ideen? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	0	20.08.2023 20:14 von Freud
Geschenkidee zum Geburtstag in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	2	14.04.2022 16:08 von bryleth03
Webdesigner gesucht in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	2	10.12.2021 15:04 von Rieke
Welcher Hoster ist der Beste? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	1	10.12.2021 15:02 von Rieke
Warum Wordpress? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	6	05.07.2021 18:27 von Rieke
Die Idee einen Blog zu führen in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	2	27.02.2021 09:50 von Samira2021
zu viele css dateien?! in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	4	19.01.2021 19:20 von Laurena
WIe kann ich Datum ausblenden? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	1	23.11.2020 12:21 von noahradar96
Tabelle mit Mannschaftslogos in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	3	23.10.2019 14:54 von andyy
Eigene Website erstellen - kostenlos! in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	0	17.05.2019 15:01 von Fusselchen

Besucher : 8126475 Heute : 393 Gestern : 463 Online : 106 21.11.2024 13:16 0 Besucher in den letzten 60 Sekunden


Nutzungsbedingungen \| Impressum \| Datenschutz \| RSS	Nach oben