Supportnet / Forum / Webseiten/HTML

Hallo alle zusammen, auf meiner hab ich einen Countdown laufen, der immer zu einem bestimmten Ereignis runterzählt. (is ja eigentlich auch die Aufgabe eines Countdowns :schäm:) Hier mein Countdown: [code] <script type='text/javascript'> var end = new Date('August 01, 2008 00:00:00'); function toSt2(n) { s = ''; if (n < 10) s += '0'; return (s + n).toString(); } function toSt3(n) { s = ''; if (n < 10) s += '00'; else if (n < 100) s += '0'; return (s + n).toString(); } function countdown() { d = new Date(); count = Math.floor(end.getTime() - d.getTime()); if(count > 0) { miliseconds = toSt3(count%1000); count = Math.floor(count/1000); seconds = toSt2(count%60); count = Math.floor(count/60); minutes = toSt2(count%60); count = Math.floor(count/60); hours = toSt2(count%24); count = Math.floor(count/24); days = count; document.getElementById('c1').innerHTML = days + ' TAGE'; document.getElementById('c2').innerHTML = hours + ' Stunden ' + minutes + ' Minuten und ' + seconds + ' Sekunden ' setTimeout('countdown()', 100); } } countdown(); </script> [/code] Dieser Countdown zählt jetzt bis zum 1. August 2008. So und wenn dieses Datum vorbei ist soll die Variable 'end' ein neues Datum bekommen.

Hallo Computerfreaki,

was genau ist dabei das Problem?

katy

Ich wollte erreichen, dass ich nicht jedes mal das Datum ändern muss.
Vielleicht könnte man ein Array erstellen in dem dann die neuen Datumsangaben drin sind.

Hallo Computerfreaki,

<script type='text/javascript'>
function toSt2(n) {
  var s = '';
  if (n < 10) s += '0';
  return (s + n).toString();
}
function toSt3(n) {
  var s = '';
  if (n < 10) s += '00';
  else if (n < 100) s += '0';
  return (s + n).toString();
}
function countdown() {
  var end = arguments;
  var d = new Date();
  var count = -1;
  var e=-1;
  while (count<=0 && e<end.length) {
   e++;
   count = Math.floor(end[e].getTime() - d.getTime());
  }
  if(count > 0) {
   var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
   var seconds = toSt2(count%60); count = Math.floor(count/60);
   var minutes = toSt2(count%60); count = Math.floor(count/60);
   var hours = toSt2(count%24); count = Math.floor(count/24);
   var days = count;
   document.getElementById('c1').innerHTML = days + ' TAGE';
   document.getElementById('c2').innerHTML = hours + ' Stunden ' + minutes + ' Minuten und ' + seconds + ' Sekunden '
   setTimeout('countdown('+end[e]+')', 100);
  }
}
window.onload=function() {
 countdown('August 01, 2008 00:00:00','December 24, 2008 12:00:00');
}
</script>

Das Array steht im Funktionsaufruf.
Beachte bitte die anderen Änderungen:
window.onload zum ersten Aufruf, sonst könnte es pasieren, dass du auf Seitenelemente zugreifen willst, die der Browser noch gar nicht im Quellcode gefudnen hat.
Alle Variablen mit var deklariert, da sie sonst global sind und sich dann verschiedene JavaScript-Funktionen gegenseitig stören können.

katy

Thank you very much :-)

Komischerweise kommt immer eine Fehlermeldung in der Firefox Fehlerkonsole bei deinem Skript:

Fehler: end[e].getTime is not a function Zeile 26

tja, sowas kann vorkommen am späten Abend.

Korrigiere die while-Schleife:

 while (count<=0 && e<end.length) {
   var z = new  Date(end[e])
   e++;
   count = Math.floor(z.getTime() - d.getTime());
  }

katy

Tut mir leid dich schon wieder zu nerven:

Es funktioniert schon wieder nicht. Diesmal zeigt die Fehlerkonsole aber keinen Fehler im Javascript-Code.
Hier mal den kompletten Countdown:

<span style="font-size: medium;"><b><u>Countdown:</b></u><br><br></span>
<span id='c1' style="font-size:large;color:#ff6600;"></span><br>
<span id='c2' style="font-size:large;color:#000000;">;</span><br>
<span style="font-size:large;color:blue;"><img src="http://www.smilies.4-user.de/include/Schule/smilie_school_039.gif" align="middle"/>bis zum letzen Schultag<img src="http://www.smilies.4-user.de/include/Schule/smilie_school_039.gif" align="middle"/></span>
</p>

<script type='text/javascript'>
function toSt2(n) {
var s = '';
if (n < 10) s += '0';
return (s + n).toString();
}
function toSt3(n) {
var s = '';
if (n < 10) s += '00';
else if (n < 100) s += '0';
return (s + n).toString();
}
function countdown() {
var end = arguments;
var d = new Date();
var count = -1;
var e=-1;
while (count<=0 && e<end.length) {
var z = new Date(end[e])
e++;
count = Math.floor(z.getTime() - d.getTime());
}
if(count > 0) {
var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
var seconds = toSt2(count%60); count = Math.floor(count/60);
var minutes = toSt2(count%60); count = Math.floor(count/60);
var hours = toSt2(count%24); count = Math.floor(count/24);
var days = count;
document.getElementById('c1').innerHTML = days + ' TAGE';
document.getElementById('c2').innerHTML = hours + ' Stunden ' + minutes + ' Minuten und ' + seconds + ' Sekunden '
setTimeout('countdown('+end[e]+')', 100);
}
}
window.onload=function() {
countdown('August 01, 2008 00:00:00','December 24, 2008 12:00:00');
}
</script>

es muss natürlich

while (count<=0 && e<end.length) {
   e++;
   var z = new  Date(end[e]);
   count = Math.floor(z.getTime() - d.getTime());
  }

lauten

JUHHUU jetzt funktionierts ;-)

Hier noch mal ne Frage:

Man muss ja die Seite erst wieder neu laden, dass sich die Sekunden ändern. Geht das auch fließend wie bei einem richtigen Countdown ???.


P.S Wenn ich mit SetInterval die Funktion aufrufe funktioniert es nicht

Nach einandhalb Stunden Arbeit ist es mir endlich mal gelungen was alleine zu programmieren ;-). Jetzt funktioniert eigentlich alles perfekt. Hier noch mal mein kompletter Skript:

<html>
<head>
<title> </title>
<meta name="author" content="Jan Schwarzkopf">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<span style="font-size: medium;"><b><u>Countdown:</b></u><br><br></span>
<span id='c1' style="font-size:large;color:#ff6600;"></span><br>
<span id='c2' style="font-size:large;color:#000000;">;</span><br>
<span style="font-size:large;color:blue;" id='untertitel'><img src="http://www.smilies.4-user.de/include/Schule/smilie_school_039.gif" align="middle"/>bis zum letzen Schultag<img src="http://www.smilies.4-user.de/include/Schule/smilie_school_039.gif" align="middle"/></span>
</p>
<script type='text/javascript'>
function toSt2(n) {
  s = '';
  if (n < 10) s += '0';
  return (s + n).toString();
}
function toSt3(n) {
  s = '';
  if (n < 10) s += '00';
  else if (n < 100) s += '0';
  return (s + n).toString();
}
function countdown() {
  d = new Date();
  aktuell = d.getTime();
  date1 = 'August 01, 2008 00:00:00';
	date1_sekunden = Date.parse(date1);
		date1_text = '... bis zum letzten Schultag vor den Sommerferien';
  date2 = 'September 16,2008 07:55:00';
   date2_sekunden = Date.parse(date2);
		date2_text = '... bis die Schule wieder anfängt';
  date3 = 'October 31, 2008 00:00:00';
	date3_sekunden = Date.parse(date3);
		date3_text = '...bis zum letzten Schultag vor den Sommerferien';
	if(date1_sekunden  > aktuell)	{
	end = date1_sekunden;
	untertitel = date1_text;
	}
	else {
		if (date2_sekunden > aktuell) {
		end = date2_sekunden;
		untertitel = date2_text;
		}
			else {
				if (date3_sekunden > aktuell) {
				end = date3_sekunden;
				untertitel = date3_text;
			}
		}
	}
	
	
	count = Math.floor(end - aktuell);
  if(count > 0) {
    miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
    seconds = toSt2(count%60); count = Math.floor(count/60);
    minutes = toSt2(count%60); count = Math.floor(count/60);
    hours = toSt2(count%24); count = Math.floor(count/24);
    days = count;
    document.getElementById('c1').innerHTML = days + ' TAGE';
    document.getElementById('c2').innerHTML = hours + ' Stunden ' + minutes + ' Minuten und ' + seconds + ' Sekunden ';
	document.getElementById('untertitel').innerHTML = untertitel
    setTimeout('countdown()', 100);
  }
}
countdown();
</script>

</body>
</html>

P.S Gibt es eigentlich noch etwas zu verbessern ???

Gruß Computerfreaki :-)

Hallo,

es gibt viel zu verbessern, insbesondere da der Code zwischendurch schon mal besser war, allein wegen der Verwendung von var.

Insgesamt ist es so ein unflexibles Monstrum geworden.

Schade

katy

• Countdown!
• Javascript
• Frage zu Java Countdown
• wie stoppe ich mein Makro
• Countdown