Antworten

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

Die letzten 5 Postings in diesem Thema » Alle anzeigen

von Ori

1:	<body onload="laufend = setInterval('timer();', 1000);">

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:

<script type="text/javascript">
var dann = new Date('Jan 1 2005 00:00:01');
var laufend;
var faktarr = new Array(10, 10, 2.4, 10, 6, 10, 6, 10); // Faktoren, aus denen faktor zusammengesetzt ist.

// Bilder-Array deklarieren und füllen
var imgarr = new Array(); // enthält die Ziffernbilder
for (var i = 0; i < 10; i++)
{
 imgarr[i] = new Image();
 imgarr[i].src = 'http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/' + i + 'c.gif'; // über die Dateinamen würde ich mir nochmal Gedanken machen
}

function timer()
// Sinnvollerweise sollten keine bereits vergebenen Funktionsnamen verwendet werden...
{
 var jetzt = new Date();
 if (jetzt > dann) // der direkte Vergleich ist auch möglich.. sogar schneller.
 { // aufhören
  clearInterval(laufend);
  return;
 }

 // Ansonsten: Uhr aktualisieren.. und zwar geschickter.
 var diff = (dann - jetzt) / 1000; // Millisekunden braucht niemand.
 var faktor =  8640000; // Faktor, dessen Vielfaches die nächste Ziffer ist.
 document.getElementById('z1').src = imgarr[Math.floor(diff / faktor)].src; // Bild zuweisen.

 for (var i = 2; i < 10; i++) // für jede weitere Ziffer
 {
  diff = diff % faktor; // Differenz um die eben geänderte Ziffer eindampfen
  faktor = faktor / faktarr[i - 2]; // den Faktor für die nächste Ziffer verkleinern
  document.getElementById('z' + i).src = imgarr[Math.floor(diff / faktor)].src; // und zuweisen
 }

 if (jetzt == dann)
  takeoff();
}
</script>

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

Die Ziffern-<img>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).

von Chris007

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:

<SCRIPT LANGUAGE="JavaScript">

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

later = new Date("Jan 1 2005 00:00: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();
}

}

</script>

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

von Ori

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()

von rushki

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:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//Created by DendE PhisH
function getTime() {
c1 = new Image(); c1.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/1c.gif";
c2 = new Image(); c2.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/2c.gif";
c3 = new Image(); c3.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/3c.gif";
c4 = new Image(); c4.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/4c.gif";
c5 = new Image(); c5.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/5c.gif";
c6 = new Image(); c6.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/6c.gif";
c7 = new Image(); c7.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/7c.gif";
c8 = new Image(); c8.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/8c.gif";
c9 = new Image(); c9.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/9c.gif";
c0 = new Image(); c0.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif";
Cc = new Image(); Cc.src = "http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/Cc.gif";
now = new Date();

//ENTER BELOW THE DATE YOU WISH TO COUNTDOWN TO
later = new Date("Nov 24 2004 23:00:00");

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");
}
if (now.toGMTString() <= later.toGMTString()) {
newtime = window.setTimeout("getTime();", 1000);
}
else {
	// Der Code der ab Erreichen des Datums ausgeführt werden soll
}
//  End -->
</script>
</HEAD>
<BODY><BODY onLoad="getTime()">
<div align="center">
<h3>Countdown zum Release von Die Siedler: Das Erbe der Könige</h3>
</div>

<center>
<table><tr><td bgcolor="black" valign="bottom">
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=x>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=a>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=b><font color="#FFFFFF">Tag(e)</font>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/Cc.gif" width=9 name=c>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=y>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=z><font color="#FFFFFF">Stunde(n)</font>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/Cc.gif" width=9 name=cz>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=d>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=e><font color="#FFFFFF">Minute(n)</font>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/Cc.gif" width=9 name=f>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=g>
<img height=21 src="http://mitglied.lycos.de/rushki1983/Div.%20Datein/Siedler_DEdK_Countdown/0c.gif" width=16 name=h><font color="#FFFFFF">Sekunde(n)</font>
</td></tr></table>
</center>



	</BODY>
</HTML>

von Lewi

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... ;)


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