kostenloser Webspace werbefrei: lima-city


Countdown der vorgegebene Zeit abläuft

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. zum Beispiel hier: http://www.jjam.de/JavaScript/Datum_Uhrzeit/Countdown.html

    Googlen nach "javascript countdown" hilft !!
  4. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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…
  5. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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
  6. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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
  7. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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
  8. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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
  9. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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
  10. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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>
  11. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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
  12. 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

Login zum Webhosting ohne Werbung!