Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen (A bis Z)

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, 3052 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 ..
Ähnliche Inhalte
Windows 7
gelöst Windows Countdown (18)

Frage von MedicalAd zum Thema Windows 7 ...

Windows Userverwaltung
gelöst Share Permission für bestimmte Zeitspanne (3)

Frage von Voiper zum Thema Windows Userverwaltung ...

JavaScript
gelöst JavaScript hochladen (12)

Frage von Patrick-IT zum Thema JavaScript ...

HTML
ISP9001- Prozesslandschaft darstellen (4)

Frage von hellas zum Thema HTML ...

Neue Wissensbeiträge
Sicherheit

Millionen Euro in den Sand gesetzt?

(3)

Information von transocean zum Thema Sicherheit ...

Sicherheit

How I hacked hundreds of companies through their helpdesk

Information von SeaStorm zum Thema Sicherheit ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
Eine Netzwerkdose im Wechsel für zwei unterschiedliche Netze (12)

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

Netzwerke
Mobile Einwahl IPSec VPN von iPhone iPad T-Mobile zur Pfsense (12)

Frage von Spitzbube zum Thema Netzwerke ...

Voice over IP
SNOM D765 an LancomR883VAW (10)

Frage von MS6800 zum Thema Voice over IP ...

Windows Netzwerk
Ordner-Freigabe außerhalb der Domäne (9)

Frage von Remsboys zum Thema Windows Netzwerk ...