Countdown der vorgegebene Zeit abläuft

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
ultimate-bravery

ultimate-bravery hat kostenlosen Webspace.

15:19, 31.12.2012
Hallo zusammen,
da ich mich mit javascript nicht auskenne habe ich heute schon lange nach einem tag/countdown">Countdown Script gesucht, aber leider nicht den passenden gefunden. Der Countdown soll eine bestimmte Anzahl an Tagen, Stunden, Minuten und Sekunden ablaufen. Diese Werte stehen in Variablen wie z.B. $tage, $stunde usw.

Kennt jemand so ein Script und kann ihn mir geben?
Liebe Grüße
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
imho

imho hat kostenlosen Webspace.

15:25, 31.12.2012
zum Beispiel hier: http://www.jjam.de/JavaScript/Datum_Uhrzeit/Countdown.html

Googlen nach "javascript countdown" hilft !!
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

15:58, 31.12.2012

ultimate-bravery schrieb:
Der Countdown soll eine bestimmte Anzahl an Tagen, Stunden, Minuten und Sekunden ablaufen. Diese Werte stehen in Variablen wie z.B. $tage, $stunde usw.
…also nicht zu einem fixen Datum hin. Dann schau dir mal diesen Countdown an…
Autor dieses Themas
ultimate-bravery

ultimate-bravery hat kostenlosen Webspace.

16:00, 31.12.2012
Meinen Beitrag richtig lesen hilft auch.
ich habe bereits lange gegoogelt und das was du gepostet hast entspricht nicht meinen Vorstellungen. Ich möchte das die Zeit die in den variablen steht abläuft und nicht einen Countdown bis zu iregnteinem Datum haben.
Beispiel:
$tage = 1
$stunden = 12
$minuten = 33
$sekunden = 54

Also soll der Countdown von dieser Zeit runterlaufen:

1d 12h 33m 54s

EDIT:
@ hackyourlife:
Ja sowas in der Art hab ich mir vorgestellt. Nur sollen die Werte nicht aus einem Textfeld über POST kommen sondern über eine Datenbank. Könntest du mir den Code zur Verfügung stellen? Das wäre super!

Beitrag zuletzt geändert: 31.12.2012 16:03:34 von ultimate-bravery

Moderator

16:09, 31.12.2012

ultimate-bravery schrieb:
Ja sowas in der Art hab ich mir vorgestellt. Nur sollen die Werte nicht aus einem Textfeld über POST kommen sondern über eine Datenbank. Könntest du mir den Code zur Verfügung stellen? Das wäre super!

Quelltext = "Seitenquelltext anzeigen" ;-)

<html>
	<head>
		<title>Countdown</title>
		<style type="text/css">
			body {
				font: 16px arial;
			}
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">// <![CDATA[
			Number.prototype.padzero = function(count) {
				var n = this.toString();
				var l = n.length;
				for(var i = l; i < count; i++)
					n = '0' + n;
				return n;
			};

			Number.prototype.formatTime = function() {
				var T = this;
				var S = T % 60, T = Math.floor(T / 60);
				var M = T % 60, T = Math.floor(T / 60);
				var H = T % 24, T = Math.floor(T / 24);
				var d = T % 30, T = Math.floor(T / 30);
				var m = T % 12, T = Math.floor(T / 12);
				var y = T;
				var formatted =
					y + 'y'
					+ m.padzero(2) + 'm'
					+ d.padzero(2) + 'd '
					+ H.padzero(2) + ':'
					+ M.padzero(2) + ':'
					+ S.padzero(2);
				return formatted;
			};

			var duration = 24 * 3600; // s

			// setup times
			var now = Math.floor(new Date().getTime() / 1000);
			var end = now + duration;

			function start() {
				// show text
				$('#infotext').text('Countdown: ' + duration.formatTime());
				$('#s').val(duration);

				// counter
				setInterval(function() {
					var diff = Math.floor(end - (new Date().getTime() / 1000));
					if(diff < 1) {
						$('#countdown').text('over');
						return;
					}
					$('#countdown').text(diff.formatTime());
				}, 500);
			}

			function restart() {
				duration = parseInt($('#s').val().trim());
				now = Math.floor(new Date().getTime() / 1000);
				end = now + duration
				$('#infotext').text('Countdown: ' + duration.formatTime());
			}
		// ]]></script>
	</head>
	<body>
		<p id="infotext"></p>
		<p id="countdown"></p>
		<p>
			<input type="text" id="s" placeholder="seconds" />
			<button onclick="restart();">Restart</button>
		</p>
		<script type="text/javascript">start();</script>
	</body>
</html>

Die Zeit brauchst du nur in Sekunden in die Variable

duration

zu schreiben, die jetzt mit einem Tag vorbelegt ist.

Aber Achtung: wenn du die Seite neu lädst beginnt er wieder von vorne…

Beitrag zuletzt geändert: 31.12.2012 16:11:40 von hackyourlife

Autor dieses Themas
ultimate-bravery

ultimate-bravery hat kostenlosen Webspace.

16:28, 31.12.2012
Ja danke das klappt so wie ich mir das vorgestellt habe. An welcher Stelle kann ich das formatieren? Ich brauche nämlich z.B. nicht die Angabe von Jahr und Monat. So möchte ich es ungefähr haben:

1d 20h 10m 40s

Und am besten soll es noch so sein, dass wenn z.B Tage = 0 ist, dass Tage dann auch nicht angezeigt werden.
Also wenn Tage 0 ist soll es z.B. so da stehen:
20h 10m 40s

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

16:45, 31.12.2012

Formatiert wird alles in der Funktion

Number.prototype.formatTime

. Wenn du es anders formatieren willst musst du nur diese Funktion anpassen, aber nachdem du dich mit JS ja nicht so auskennst: http://lima.hackyourlife.tk/forum/countdown2

Code:

<html>
	<head>
		<title>Countdown</title>
		<style type="text/css">
			body {
				font: 16px arial;
			}
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">// <![CDATA[
			Number.prototype.formatTime = function() {
				var T = this;
				var S = T % 60, T = Math.floor(T / 60);
				var M = T % 60, T = Math.floor(T / 60);
				var H = T % 24, T = Math.floor(T / 24);
				var d = T;
				var f = '';
				if(d > 0)
					f = d + 'd ';
				if(H > 0 || f.length)
					f += H + 'h ';
				if(M > 0 || f.length)
					f += M + 'm ';
				f += S + 's';

				return f;
			};

			var duration = 24 * 3600; // s

			// setup times
			var now = Math.floor(new Date().getTime() / 1000);
			var end = now + duration;

			function start() {
				// show text
				$('#infotext').text('Countdown: ' + duration.formatTime());
				$('#s').val(duration);

				// counter
				setInterval(function() {
					var diff = Math.floor(end - (new Date().getTime() / 1000));
					if(diff < 1) {
						// finished!
						$('#countdown').text('over');
						return;
					}
					$('#countdown').text(diff.formatTime());
				}, 500);
			}

			// only for restarting with new duration (input field)
			function restart() {
				duration = parseInt($('#s').val().trim());
				now = Math.floor(new Date().getTime() / 1000);
				end = now + duration
				$('#infotext').text('Countdown: ' + duration.formatTime());
			}
		// ]]></script>
	</head>
	<body>
		<p id="infotext"></p>
		<p id="countdown"></p>
		<p>
			<input type="text" id="s" placeholder="seconds" />
			<button onclick="restart();">Restart</button>
		</p>
		<script type="text/javascript">start();</script>
	</body>
</html>

Beitrag zuletzt geändert: 31.12.2012 16:47:31 von hackyourlife

Autor dieses Themas
ultimate-bravery

ultimate-bravery hat kostenlosen Webspace.

16:51, 31.12.2012
Cool vielen Dank echt nett von dir! Funktioniert alles.

EDIT: Hab noch ein Problem. Das hatte ich heute morgen auch schon hier im Forum gepostet. Ich würde den Countdown gerne an zwei verschiedenen Stellen auf meiner Seite darstellen. Aber nur der Countdown an der ersten Stelle funktioniert. Hast du dafür zufällig auch noch eine Lösung?

Beitrag zuletzt geändert: 31.12.2012 17:07:00 von ultimate-bravery

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

17:28, 31.12.2012

ultimate-bravery schrieb:
Ich würde den Countdown gerne an zwei verschiedenen Stellen auf meiner Seite darstellen. Aber nur der Countdown an der ersten Stelle funktioniert.

Gib dem

<p>

oder was du sonst für ein Element nutzt ein

class

-Attribut, und zwar an beiden Stellen die gleiche Class (z.B.

countdown

). Beim CSS-Selektor im JavaScript ersetzt du dann das

#countdown

durch z.B.

.countdown

Also so: http://lima.hackyourlife.tk/forum/countdown3

<html>
	<head>
		<title>Countdown</title>
		<style type="text/css">
			body {
				font: 16px arial;
			}
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">// <![CDATA[
			Number.prototype.formatTime = function() {
				var T = this;
				var S = T % 60, T = Math.floor(T / 60);
				var M = T % 60, T = Math.floor(T / 60);
				var H = T % 24, T = Math.floor(T / 24);
				var d = T;
				var f = '';
				if(d > 0)
					f = d + 'd ';
				if(H > 0 || f.length)
					f += H + 'h ';
				if(M > 0 || f.length)
					f += M + 'm ';
				f += S + 's';

				return f;
			};

			var duration = 24 * 3600; // s

			// setup times
			var now = Math.floor(new Date().getTime() / 1000);
			var end = now + duration;

			function start() {
				// counter
				setInterval(function() {
					var diff = Math.floor(end - (new Date().getTime() / 1000));
					if(diff < 1) {
						// finished!
						$('.countdown').text('over');
						return;
					}
					$('.countdown').text(diff.formatTime());
				}, 500);
			}
		// ]]></script>
	</head>
	<body>
		<p>Countdown: ein Tag</p>
		<p class="countdown"></p>
		<p>Seitenquelltext ansehen!</p>
		<p>Ein weiterer Countdown: <span class="countdown" style="font-weight:bold"></span></p>
		<script type="text/javascript">start();</script>
	</body>
</html>

Autor dieses Themas
ultimate-bravery

ultimate-bravery hat kostenlosen Webspace.

16:03, 9.1.2013
Ok danke das hat funktioniert. Also die gleiche Zeit auf einer Seite mehrmals ausgeben klappt ja jetzt aber nun möchte ich auf einer Seite zwei unterschiedliche Zeiten laufen lassen. Wie muss ich den Code dafür verändern? Wäre cool wenn du mir nochmal helfen könntest.
Liebe Grüße
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city