Javascript Zeitspanne als Countdown darstellen

Hallo,

ich bin absoluter Javascript Anfänger und möchte folgendes realisieren:

Es soll die Restzeit zwischen der aktuellen Zeit und einer festgesetzten Zeit dargestellt werden. Wenn die Zeit abgelaufen ist, soll ein Page-reload stattfinden.

Dazu habe ich den folgenden Code, welcher bisher nur die Zeit sekundengenau darstellt:

window.setInterval("timefunc()",1000);
function timefunc(){
d = new Date ();
h = (d.getHours () < 10 ? '0' + d.getHours () : d.getHours ());
m = (d.getMinutes () < 10 ? '0' + d.getMinutes () : d.getMinutes ());
s = (d.getSeconds () < 10 ? '0' + d.getSeconds () : d.getSeconds ());

document.getElementById("time").innerHTML =
+ h + ':' + m + ':' + s;
}

Nun nehmen wir mal die Anfangszeit, es ist 18:30Uhr. Die zweite Zeit ist jeden Tag um 20Uhr. Das heißt ich möchte etwas in der Art anzeigen: "Verbleibende Zeit = 1:29:59. Wenn die Zeit abgelaufen ist, soll die Seite neu geladen werden.

Es wäre sehr nett, wenn mir jemand verraten könnte, wie ich das umsetzen kann. Vielen Dank.

P.S.:
Meine ersten Überlegungen waren sowas in der Art:

if (now < 20) {
document.getElementById("time").innerHTML =
+ 'verbleibende Zeit: ' + h + ':' + m + ':' + s;
}
if ( now = 20){
window.location.href
}

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 232473

Url: https://administrator.de/forum/javascript-zeitspanne-als-countdown-darstellen-232473.html

Ausgedruckt am: 16.05.2025 um 07:05 Uhr

12 Kommentare

Neuester Kommentar

Hallo bloedername,
das sollte dir auf die Sprünge helfen:
http://www.umingo.de/doku.php?id=php:countdown

Grüße Uwe

Hallo und vielen Dank zunächst. Ich versuche den Code zu verstehen. Leider fehlt mir das Verständnis, wo ich die Zeit um 20Uhr einstellen kann. Soweit ich es verstehe muss das hier stattfinden:

<div id="cID"> Init<script>countdown(100000,'cID');</script></div>
..
<div id="cID4"> <script>countdown2(5,3,20,1,'cID4');</script></div>

Aber wie kann ich hier die Uhrzeit angeben? Ich verstehe diese Zahlen nicht. Wofür stehen die? Was ist der Unterschied, wenn man die per Komma trennt?

Beste Grüße

OK, der countdown auf der Seite benutzt entweder die Angabe von Sekunden, oder eben die Variante countdown2(Tage,Stunden,Minuten,Sekunden,ID). Da du aber eine Zielzeit angeben willst habe ich dir die Funktion mal angepasst, damit du ein Datum übergeben kannst:

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Test-Countdown</title>
<script type="text/javascript">  
function countdown(time,id){
  	var today = new Date();
	t = Math.floor((time - today)/1000);
	d = Math.floor(t/(60*60*24)) % 24; 
	
	h = Math.floor(t/(60*60)) % 24;
	m = Math.floor(t/60) %60;
	s = t %60;
	d = (d >  0) ? d+"d ":"";  
	h = (h < 10) ? "0"+h : h;  
	m = (m < 10) ? "0"+m : m;  
	s = (s < 10) ? "0"+s : s;  
	
	strZeit =d + h + ":" + m + ":" + s;  
	
	if(t > 0)
	{
		window.setTimeout('countdown('+ --time+',\''+id+'\')',1000);  
	}
	else
	{
		window.location.reload();
	}
	document.getElementById(id).innerHTML = strZeit;
}
</script>
</head>

<body onLoad="countdown(new Date(2014,2,13,20,0,0),'cID');">  
<div id="cID"></div>  
</body>
</html>

Den Aufruf des Countdowns machst du dann wie folgt:

countdown(new Date(2014,2,13,20,0,0),'cID');

Die Angabe des Datums erfolgt nach folgendem Schema Jahr, Monat - 1, Tag, Stunde, Minute, Sekunde. Dabei gilt es aber zu beachten das die Monate bei 0 beginnen, also ist der März eine 2. Der letzte Parameter ist die ID eines Elementes auf deiner Seite in der der Countdown dargestellt werden soll.
Im Beispiel beginnt der Countdown beim Laden der Seite, und wenn der Countdown abgelaufen ist, wird die Seite neu geladen.
Alternativ kann man das Datum auch so angeben:

countdown(new Date('2014/03/13 20:00:00'),'cID');

Die möglichen Varianten kannst du hier nachlesen.

Grüße Uwe

Hallo und vielen Dank. Ich habe jetzt mit PHP die jeweils aktuellen Daten für das Datum eingefügt. Leider will er aber im Fall von

if(time > 0) {
window.setTimeout('countdown('+ --time+',\''+id+'\')',1000);

} else {
window.location.reload();
}

nicht neuladen! Er zählt dann einfach weiter runter ins Minus.

Besten dank.

was willst du denn mit dem Neuladen erreichen, du musst ja nach dem Ablauf eine neue Zeit an die Seite übergeben ...

Kurz gesagt handelt es sich um ein primitives PHP Script, wonach in einer Zeit zwischen 18-20 Uhr eine variable gilt, die ein Zugriff temporär ermöglicht.

Nun handelt es sich lediglich um einen Zugriff auf eine Webcam... für eine Handvoll Peronen. Außerhalb der Zeit wird eine Information angezeigt. Darin sollte nun auch noch der Countdown laufen, wie lange es noch dauert, bis der Zugang möglich ist. Da die Personen aber nicht unbedingt wissen, dass sie die Seite neu laden müssen um das PHP script auszuführen brauche ich einen erzwungenen Reload der Seite per Javascript und das jeden Tag quasi um 18Uhr.

Im nächsten Schritt wollte ich dann den Countdown benutzen um den Stream zu beenden, damit Sie sich am nächsten Tag neu einloggen müssen und ich stets einen Überblick bekomme, wer gerade zuschaut.

Dann solltest du den Countdown nur dann starten wenn auch vom PHP-Script eine Zeit übergeben wird, und das prüfst du mit einem Javascript und startest den Countdown eben nur dann wenn eine Zeit übergeben wurde.

So in der Art habe ich es jetzt auch gemacht. Die Zeit wird per date() ermittelt und in die ausgegebene Nachricht (außerhalb der Zeit) eingefügt. Dass funktioniert auch alles schon sehr gut bis auf den reload.

ach sorry, da war eine Variable falsch benannt (ist oben korrigiert):

if(time > 0)

sollte

if(t > 0)

lauten...

Hallo,

sorry für die späte Antwort. Also mit dem string ändern funktioniert, dann springt er um. Die Seite neu zu laden jedoch nicht. Da zählt er den Counter weiter runter.

Beste Grüße

hier gehts ...poste doch mal bitte deinen ganzen Code sonst rate ich hier ins blaue !!

So, da ich hier immer noch nicht von dir weiß, was dein PHP-Script nach einem Reload an Daten an das Javascript übergibt hier mal eine Variante die nach dem Reload die Zeit auf einen festen Abstand in die Zukunft setzt, mit deiner inzwischen wieder gelöschten Variante mit ausgeschriebenen Zeit:
Denke das du das an deine Wünsche anpassen können solltest... Javascript ist ja nicht so unterschiedlich zu PHP (bzw. Syntax lernen ist ja kein Hexenwerk).

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Test-Countdown</title>
<script type="text/javascript">  
function countdown(time,id){
  	var today = new Date();
	var strZeit;
	t = Math.floor((time - today)/1000);
	d = Math.floor(t/(60*60*24)) % 24; 
	h = Math.floor(t/(60*60)) % 24;
	m = Math.floor(t/60) %60;
	s = t %60;
	s = (s != 1) ? s+" Sekunden" : s+" Sekunde";  
	m = (m != 1) ? m+" Minuten" : m+" Minute";  
	h = (h != 1) ? h+" Stunden" : h+" Stunde";  
	d = (d != 1) ? d+" Tage" : d+" Tag";  
	
	if (t < 60){
		strZeit = s;
	}else if (t < 3600){
		strZeit = m + " " + s;  
	}else if (t < (3600*24)){
		strZeit = h + " " + m + " " + s;  
	}else{
		strZeit = d + " " + h + " " + m + " " + s;  
	}
	if(t > 0){
		window.setTimeout('countdown('+ --time+',\''+id+'\')',1000);  
	}
	else{
		strZeit = "Zeit abgelaufen, Seite wird neu geladen und Timer neu gestartet!"  
		window.setTimeout('window.location.reload()',1000);  
		
	}
	document.getElementById(id).innerHTML = strZeit;
}
</script>
</head>

<body onLoad="var d = new Date(); countdown(new Date(d.getFullYear(),d.getMonth(),d.getDate(),d.getHours(),d.getMinutes()+1,d.getSeconds() + 5),'cID');">  
<div id="cID"></div>  
</body>
</html>