gimi: Countdown

Hallo,

jeder der in Google nach einem Countdown sucht, der bekommt in der Regel immer eine ähnliche "Version" des untenstehenden JavaScript Countdowns.

Das Problem dabei ist nur, dass anscheinend niemanden aufgefallen ist, dass z.B.: wenn der Countdown 10:01:00 ist danach nicht 10:00:59 erscheint, sondern 10:59?

Ich habe versucht dem Fehler auf die Schliche zu kommen, leider ohne Erfolg. Es wäre sehr toll, wenn jemand ein Vorschlag dazu hätte.

Hier der Code:

<html>  
<head>  
<style type="text/css">  
body{background:url(hintergrund.jpg) center center;}  
#countdown{  
	position:absolute;  
	height:280px;  
	width:800px;  
	margin:-180px 0px 0px -400px;  
	top:50%;  
	left:50%;  
	font:120pt Arial;  
	font-weight:bold;  
	text-align:center;  
	color:white;  
}  
</style>  
<script type="text/javascript">  
/* <![CDATA[ */  
var CountdownJahr = 2010;  
var CountdownMonat = 3;  
var CountdownTag = 17;  
var CountdownStunde = 9;  
var CountdownMinute = 0;  
var CountdownSekunde = 0;  
  
function CountdownAnzeigen(){  
	var Jetzt = new Date();  
	var Countdown = new Date(CountdownJahr, CountdownMonat-1, CountdownTag, CountdownStunde, CountdownMinute, CountdownSekunde);  
	var MillisekundenBisCountdown = Countdown.getTime()-Jetzt.getTime();  
	var Rest = Math.floor(MillisekundenBisCountdown/1000);  
	var CountdownText = "";  
  
	if(Rest >= 31536000){  
		var Jahre = Math.floor(Rest/31536000);  
		Rest = Rest-Jahre*31536000;  
		CountdownText += Jahre;  
		CountdownText += ( Jahre > 1 || Jahre == 0 ) ? ' Jahre ' : ' Jahr ';  
	}  
  
	if(Rest >= 86400){  
		var Tage = Math.floor(Rest/86400);  
		Rest = Rest-Tage*86400;  
		CountdownText += Tage;  
		CountdownText += ( Tage > 1 || Tage == 0 ) ? ' Tage ' : ' Tag ';  
	}  
  
	if(Rest >= 3600){  
		var Stunden = Math.floor(Rest/3600);  
		Rest = Rest-Stunden*3600;  
		CountdownText += ( Stunden >= 10 ) ? '' : '0';  
		countdownText += Stunden + ':';  
	}  
  
	if(Rest >= 60){  
		var Minuten = Math.floor(Rest/60);  
		Rest = Rest-Minuten*60;  
		CountdownText += ( Minuten >= 10 ) ? '' : '0';  
		CountdownText += Minuten + ':';  
	}  
  
	CountdownText += ( Rest >= 10 ) ? '' : '0';  
	CountdownText += Rest;  
  
	document.getElementById('Countdown').innerHTML = CountdownText;  
	window.setTimeout("CountdownAnzeigen()", 1000);  
}  
/* ]]> */  
</script>  
</head>  
<body onLoad="CountdownAnzeigen();">  
<div id="Countdown"></div>  
</body>  
</html>

Vielen Dank für Eure mithilfe

  1. Ich habe versucht dem Fehler auf die Schliche zu kommen, leider ohne Erfolg. Es wäre sehr toll, wenn jemand ein Vorschlag dazu hätte.

    Servus,

    habe gerade zufällig selber so einen Counter erstellt, Du kannst ihn gerne modifizieren und benutzen, wenn Du magst. Wenn Deine Website auf einer Scriptsprache wie PHP basiert, kannst Du beim Aufruf oServerLoadPageDate = new Date($sNow * 1000) das "$sNow" von der PHP-Funktion time() füllen lassen, dann Funktioniert der Counter so gut wie völlig unabhängig vom Client. Will heißen, egal, welches Datum beim Client eingestellt ist, der Counter nimmt die Zeit des Servers. Ohne eine Scriptsprache im Hintergrund musst Du die Anweisung "$sNow * 1000) aus der Klammer entfernen.

      
    <script type="text/javascript">  
    	<!--  
      
    	oServerLoadPageDate = new Date($sNow * 1000);  
    	oReleaseDate = new Date('January 7, 2010 20:00');  
    	iServerSecondsLeft = oReleaseDate.getTime() - oServerLoadPageDate.getTime();  
    	oClientNowDate = oServerLoadPageDate;  
      
    	function WriteDate() {  
    		oClientNowDate = new Date(oClientNowDate.getTime() + 1000);  
    		iDifferenceToReleaseDate = iServerSecondsLeft - (oClientNowDate.getTime() - oServerLoadPageDate.getTime()) - (oReleaseDate.getTimezoneOffset() * 60 * 1000);  
    		iSecondsLeft = Math.round(iDifferenceToReleaseDate / 1000);  
    		iSeconds = iSecondsLeft % 60;  
    		sSecondsLabel = (iSeconds == 1) ? 'Sekunde' : 'Sekunden';  
    		iMinutes = Math.floor(iSecondsLeft / 60) % 60;  
    		sMinutesLabel = (iMinutes == 1) ? 'Minute' : 'Minuten';  
    		iHours = Math.floor(iSecondsLeft / 3600) % 24;  
    		sHoursLabel = (iHours == 1) ? 'Stunde' : 'Stunden';  
    		iDays = Math.floor(iSecondsLeft / 3600 / 24);  
    		sDaysLabel = (iDays == 1) ? 'Tag' : 'Tage';  
      
    		window.document.getElementById('ReleaseDate').innerHTML = sReleaseDateBoxContent + '<p>' + iDays + ' ' + sDaysLabel + ', ' + iHours + ' ' + sHoursLabel + ', ' + iMinutes + ' ' + sMinutesLabel + ' und ' + iSeconds + ' ' + sSecondsLabel + ' verbleibend</p>';  
    	}  
      
    	window.setInterval('WriteDate()', 1000);  
    	-->  
    </script>  
      
    
    
    1. Hallo seber-rider,

      vielen Dank. Mir wäre JavaScript lieber. Der Counter soll vom Client abhängig sein. Ich möchte mir das als ein Desktophintergrund einstellen. PHP würde ohne Apache und etc. nicht laufen.

      Ich werde das ausprobieren und Dir bescheid geben.

      Kannst Du evtl. ein Blick über mein Script werfen, wo der Fehler liegen könnte?

      Vielen Dank
      gimi

      1. Kannst Du evtl. ein Blick über mein Script werfen, wo der Fehler liegen könnte?

        Hallo,

        Das Problem lag darin, dass zum Beispiel die Tage nur angezeigt werden, wenn der Rest >= 86400 ist, wenn der Rest kleiner ist, wurde NICHTS angezeigt, daher brauchst Du für jede IF-Abfrage auch einen ELSE-Zweig, der dann die Anzeige übernimmt:

          
        function CountdownAnzeigen(){  
                var Jetzt = new Date();  
                var Countdown = new Date(CountdownJahr, CountdownMonat-1, CountdownTag, CountdownStunde, CountdownMinute, CountdownSekunde);  
                var MillisekundenBisCountdown = Countdown.getTime()-Jetzt.getTime();  
                var Rest = Math.floor(MillisekundenBisCountdown/1000);  
                var CountdownText = "";  
          
                if(Rest >= 31536000){  
                        var Jahre = Math.floor(Rest/31536000);  
                        Rest = Rest-Jahre*31536000;  
                        CountdownText += Jahre;  
                        CountdownText += ( Jahre > 1 || Jahre == 0 ) ? ' Jahre ' : ' Jahr ';  
                } else {  
                        CountdownText += '0 Jahre ';  
                }  
          
                if(Rest >= 86400){  
                        var Tage = Math.floor(Rest/86400);  
                        Rest = Rest-Tage*86400;  
                        CountdownText += Tage;  
                        CountdownText += ( Tage > 1 || Tage == 0 ) ? ' Tage ' : ' Tag ';  
                } else {  
                        CountdownText += '0 Tage ';  
                }  
          
                if(Rest >= 3600){  
                        var Stunden = Math.floor(Rest/3600);  
                        Rest = Rest-Stunden*3600;  
                        CountdownText += ( Stunden >= 10 ) ? '' : '0';  
                        CountdownText += Stunden + ':';  
                } else {  
                        CountdownText += '00:';  
                }  
          
                if(Rest >= 60){  
                        var Minuten = Math.floor(Rest/60);  
                        Rest = Rest-Minuten*60;  
                        CountdownText += ( Minuten >= 10 ) ? '' : '0';  
                        CountdownText += Minuten + ':';  
                } else {  
                        CountdownText += '00:';  
                }  
          
                CountdownText += ( Rest >= 10 ) ? '' : '0';  
                CountdownText += Rest;  
          
                document.getElementById('Countdown').innerHTML = CountdownText;  
                window.setTimeout("CountdownAnzeigen()", 1000);  
        }  
        
        
        1. Hallo,

          vielen Dank, ich bedanke mich für Ihre Mühe.

          Gruß
          gimi