online 1
gast (50)

/ Forum / Webseiten/HTML

Webseiten/HTMLWebseiten/HTML

Fragevon Computerfreaki vom 03.07.2020, 19:49 Options

Lösung

Javascript-Countdown automatisieren

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:

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

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.


Antwort schreiben

Antwort 1 von katy vom 03.07.2020, 20:09 Options

Hallo Computerfreaki,

was genau ist dabei das Problem?

katy

Antwort 2 von Computerfreaki vom 03.07.2020, 20:10 Options

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.

Antwort 3 von katy vom 03.07.2020, 21:55 Options

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

Antwort 4 von Computerfreaki vom 04.07.2020, 06:47 Options

Thank you very much :-)

Antwort 5 von Computerfreaki vom 04.07.2020, 17:19 Options

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

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

Antwort 6 von katy vom 04.07.2020, 17:25 Options

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

Antwort 7 von Computerfreaki vom 04.07.2020, 17:57 Options

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>

Antwort 8 von katy vom 04.07.2020, 22:23 OptionsLösung

Lösung
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

Antwort 9 von Computerfreaki vom 05.07.2020, 08:28 Options

JUHHUU jetzt funktionierts ;-)

Antwort 10 von Computerfreaki vom 07.07.2020, 14:43 Options

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

Antwort 11 von Computerfreaki vom 07.07.2020, 18:43 Options

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

Antwort 12 von katy vom 08.07.2020, 01:15 Options

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

Ähnliche Themen

Countdown!
SilverTiger  27.02.2007 - 295 Hits -

Javascript
tomkat  08.07.2007 - 200 Hits - 2 Antworten

Frage zu Java Countdown
Dörk  15.08.2007 - 47 Hits - 9 Antworten

wie stoppe ich mein Makro
pelikan  12.10.2007 - 88 Hits - 3 Antworten

Countdown
DIVE  08.01.2008 - 226 Hits - 1 Antwort

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Version: supportware 1.9.150 / 10.06.2022, Startzeit:Thu Jan 8 21:07:44 2026