bloedername
Mar 13, 2014, updated at 07:21:38 (UTC)
view6796
view12
0
Goto Top

Javascript Zeitspanne als Countdown darstellen

GermanQuestionJavaScriptDevelopment
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
}
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 232473

Url: https://administrator.de/contentid/232473

Printed on: April 20, 2024 at 01:04 o'clock

12 Comments
Latest comment
Goto Top
Member: colinardo
colinardo Mar 13, 2014 at 07:38:14 (UTC)
Goto Top
Hallo bloedername,
das sollte dir auf die Sprünge helfen:
http://www.umingo.de/doku.php?id=php:countdown

Grüße Uwe
Member: bloedername
bloedername Mar 13, 2014 updated at 08:06:47 (UTC)
Goto Top
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
Member: colinardo
colinardo Mar 13, 2014 updated at 10:20:18 (UTC)
Goto Top
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
Member: bloedername
bloedername Mar 13, 2014 at 09:58:47 (UTC)
Goto Top
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.
Member: colinardo
colinardo Mar 13, 2014 at 10:01:04 (UTC)
Goto Top
was willst du denn mit dem Neuladen erreichen, du musst ja nach dem Ablauf eine neue Zeit an die Seite übergeben ...
Member: bloedername
bloedername Mar 13, 2014 updated at 10:11:16 (UTC)
Goto Top
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.
Member: colinardo
colinardo Mar 13, 2014 at 10:11:22 (UTC)
Goto Top
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.
Member: bloedername
bloedername Mar 13, 2014 at 10:14:34 (UTC)
Goto Top
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.
Member: colinardo
colinardo Mar 13, 2014 updated at 10:59:37 (UTC)
Goto Top
ach sorry, da war eine Variable falsch benannt (ist oben korrigiert):
if(time > 0)
sollte
if(t > 0)
lauten...
Member: bloedername
bloedername Mar 13, 2014 updated at 21:56:49 (UTC)
Goto Top
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
Member: colinardo
colinardo Mar 13, 2014 updated at 20:44:26 (UTC)
Goto Top
hier gehts ...poste doch mal bitte deinen ganzen Code sonst rate ich hier ins blaue !!
Member: colinardo
colinardo Mar 14, 2014 updated at 07:05:41 (UTC)
Goto Top
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>
Denke damit sollte das Thema hier abgeschlossen sein.

Grüße Uwe
GermanQuestionJavaScriptDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment