Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Javascript Zeitspanne als Countdown darstellen

Frage Entwicklung JavaScript

Mitglied: bloedername

bloedername (Level 1) - Jetzt verbinden

13.03.2014, aktualisiert 08:21 Uhr, 2944 Aufrufe, 12 Kommentare

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
}
Mitglied: colinardo
13.03.2014 um 08:38 Uhr
Hallo bloedername,
das sollte dir auf die Sprünge helfen:
http://www.umingo.de/doku.php?id=php:countdown

Grüße Uwe
Bitte warten ..
Mitglied: bloedername
13.03.2014, aktualisiert um 09:06 Uhr
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
Bitte warten ..
Mitglied: colinardo
13.03.2014, aktualisiert um 11:20 Uhr
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:
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Test-Countdown</title> 
06.
<script type="text/javascript"> 
07.
function countdown(time,id){ 
08.
  	var today = new Date(); 
09.
	t = Math.floor((time - today)/1000); 
10.
	d = Math.floor(t/(60*60*24)) % 24;  
11.
	 
12.
	h = Math.floor(t/(60*60)) % 24; 
13.
	m = Math.floor(t/60) %60; 
14.
	s = t %60; 
15.
	d = (d >  0) ? d+"d ":""; 
16.
	h = (h < 10) ? "0"+h : h; 
17.
	m = (m < 10) ? "0"+m : m; 
18.
	s = (s < 10) ? "0"+s : s; 
19.
	 
20.
	strZeit =d + h + ":" + m + ":" + s; 
21.
	 
22.
	if(t > 0) 
23.
24.
		window.setTimeout('countdown('+ --time+',\''+id+'\')',1000); 
25.
26.
	else 
27.
28.
		window.location.reload(); 
29.
30.
	document.getElementById(id).innerHTML = strZeit; 
31.
32.
</script> 
33.
</head> 
34.
 
35.
<body onLoad="countdown(new Date(2014,2,13,20,0,0),'cID');"> 
36.
<div id="cID"></div> 
37.
</body> 
38.
</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
Bitte warten ..
Mitglied: bloedername
13.03.2014 um 10:58 Uhr
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.
Bitte warten ..
Mitglied: colinardo
13.03.2014 um 11:01 Uhr
was willst du denn mit dem Neuladen erreichen, du musst ja nach dem Ablauf eine neue Zeit an die Seite übergeben ...
Bitte warten ..
Mitglied: bloedername
13.03.2014, aktualisiert um 11:11 Uhr
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.
Bitte warten ..
Mitglied: colinardo
13.03.2014 um 11:11 Uhr
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.
Bitte warten ..
Mitglied: bloedername
13.03.2014 um 11:14 Uhr
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.
Bitte warten ..
Mitglied: colinardo
13.03.2014, aktualisiert um 11:59 Uhr
ach sorry, da war eine Variable falsch benannt (ist oben korrigiert):
if(time > 0)
sollte
if(t > 0)
lauten...
Bitte warten ..
Mitglied: bloedername
13.03.2014, aktualisiert um 22:56 Uhr
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
Bitte warten ..
Mitglied: colinardo
13.03.2014, aktualisiert um 21:44 Uhr
hier gehts ...poste doch mal bitte deinen ganzen Code sonst rate ich hier ins blaue !!
Bitte warten ..
Mitglied: colinardo
14.03.2014, aktualisiert um 08:05 Uhr
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).
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Test-Countdown</title> 
06.
<script type="text/javascript"> 
07.
function countdown(time,id){ 
08.
  	var today = new Date(); 
09.
	var strZeit; 
10.
	t = Math.floor((time - today)/1000); 
11.
	d = Math.floor(t/(60*60*24)) % 24;  
12.
	h = Math.floor(t/(60*60)) % 24; 
13.
	m = Math.floor(t/60) %60; 
14.
	s = t %60; 
15.
	s = (s != 1) ? s+" Sekunden" : s+" Sekunde"; 
16.
	m = (m != 1) ? m+" Minuten" : m+" Minute"; 
17.
	h = (h != 1) ? h+" Stunden" : h+" Stunde"; 
18.
	d = (d != 1) ? d+" Tage" : d+" Tag"; 
19.
	 
20.
	if (t < 60){ 
21.
		strZeit = s; 
22.
	}else if (t < 3600){ 
23.
		strZeit = m + " " + s; 
24.
	}else if (t < (3600*24)){ 
25.
		strZeit = h + " " + m + " " + s; 
26.
	}else{ 
27.
		strZeit = d + " " + h + " " + m + " " + s; 
28.
29.
	if(t > 0){ 
30.
		window.setTimeout('countdown('+ --time+',\''+id+'\')',1000); 
31.
32.
	else{ 
33.
		strZeit = "Zeit abgelaufen, Seite wird neu geladen und Timer neu gestartet!" 
34.
		window.setTimeout('window.location.reload()',1000); 
35.
		 
36.
37.
	document.getElementById(id).innerHTML = strZeit; 
38.
39.
</script> 
40.
</head> 
41.
 
42.
<body onLoad="var d = new Date(); countdown(new Date(d.getFullYear(),d.getMonth(),d.getDate(),d.getHours(),d.getMinutes()+1,d.getSeconds() + 5),'cID');"> 
43.
<div id="cID"></div> 
44.
</body> 
45.
</html>
Denke damit sollte das Thema hier abgeschlossen sein.

Grüße Uwe
Bitte warten ..
Neuester Wissensbeitrag
DSL, VDSL

Telekom blockiert immer noch den Port 7547 in ihrem Netz

(3)

Erfahrungsbericht von joachim57 zum Thema DSL, VDSL ...

Ähnliche Inhalte
JavaScript
gelöst Range (Slider) Javascript mit Plus-Minus Buttons (3)

Frage von internet2107 zum Thema JavaScript ...

JavaScript
gelöst JavaScript hochladen (12)

Frage von Patrick-IT zum Thema JavaScript ...

E-Mail
gelöst Tobit David fx: emails mit base64 Kodierung darstellen (1)

Frage von MichiBLNN zum Thema E-Mail ...

JavaScript
gelöst HTML-Javascript - Auslesen von Formularfeldern (1)

Frage von internet2107 zum Thema JavaScript ...

Heiß diskutierte Inhalte
Windows Userverwaltung
Ausgeschiedene Mitarbeiter im Unternehmen - was tun mit den AD Konten? (34)

Frage von patz223 zum Thema Windows Userverwaltung ...

LAN, WAN, Wireless
gelöst Server erkennt Client nicht wenn er ausserhalb des DHCP Pools liegt (28)

Frage von Mar-west zum Thema LAN, WAN, Wireless ...

LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (21)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Viren und Trojaner
Aufgepasst: Neue Ransomware Goldeneye verbreitet sich rasant (20)

Link von Penny.Cilin zum Thema Viren und Trojaner ...