Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

Countdown mit JavaScript

Dieser JavaScript Countdown errechnet die verbleibenden Tage, Stunden, Minuten und Sekunden bis zu einem beliebigen Zeitpunkt in der Zukunft.
JavaScript

Im JavaScript Code müssen die Termine chronologisch mit Datum (Format siehe Kommentar im Quelltext) und Text angelegt werden. Der Code berechnet automatisch den nächsten Termin in der Zukunft und den dazugehörigen Countdown. Liegen alle angelegten Termine in der Vergangenheit, so wird der komplette Countdown-Text nicht mehr angezeigt. Individuelle Anpassungen, z.B. mit einem Hinweis nach Ablauf des letzten Datums sind nachträglich leicht einfügbar.

Als Beispiel auf dieser Seite dient ein Countdown bis zum nächsten Jahreswechsel.

Beispiel

Der JavaScript-Code:

// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// ---------------------- JS Countdown v. 1.1 ------------------------
// ------------------ Copyright 2012 Patrick Saar --------------------
// -------------------------------------------------------------------

function countdown() {
    var tage = 'Tage';
    var countdown_d, countdown_h, countdown_m, countdown_s;
    var ausgabe_s, ausgabe_m, ausgabe_h;
    var endTime = [];
    var text = [];
    var i = 0;
                
                
    // Hier alle Termine chronologisch(!) mit Datum und Text anlegen
	endTime[0] = new Date(2015, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
    text[0] = 'zum Jahreswechsel 2014/2015';
	endTime[1] = new Date(2016, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
    text[1] = 'zum Jahreswechsel 2015/2016';
	endTime[2] = new Date(2017, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
    text[2] = 'zum Jahreswechsel 2016/2017';
	endTime[3] = new Date(2018, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
    text[3] = 'zum Jahreswechsel 2017/2018';
	endTime[4] = new Date(2019, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
    text[4] = 'zum Jahreswechsel 2018/2019';
	endTime[5] = new Date(2020, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
    text[5] = 'zum Jahreswechsel 2019/2020';	
                
                
    // Berechnung des nächsten Termins           
	var timeNow = new Date();
    while((endTime[i] - timeNow) < 0) {
        i++;
    }
	var diffTime = endTime[i] - timeNow; //in Millisekunden
	diffTime = Math.floor(diffTime/1000);
	
	//Berechnung der Tage, Stunden, Minuten, Sekunden
	if(diffTime >= 0) {
		countdown_d = Math.floor(diffTime / 86400);
		diffTime = diffTime % 86400;
		countdown_h = Math.floor(diffTime / 3600);
		diffTime = diffTime % 3600;
		countdown_m = Math.floor(diffTime / 60);
		countdown_s = diffTime % 60;
	
        if(countdown_s < 10) ausgabe_s = '0'+countdown_s;
        else ausgabe_s = countdown_s;
        if(countdown_m < 10) ausgabe_m = '0'+countdown_m;
        else ausgabe_m = countdown_m;
        if(countdown_h < 10) ausgabe_h = '0'+countdown_h;
        else ausgabe_h = countdown_h;
        if(countdown_d == 1) {
            tage = 'Tag';
        }	
        
        // verbleibende Zeit und Termintext schreiben
        document.getElementById('countdown').innerHTML = 'Noch <b>'+countdown_d+'</b> '+tage+' und <b>'+ausgabe_h+':'+ausgabe_m+':'+ausgabe_s+
'</b> bis '+text[i];
	}
	else {
	    document.getElementById('countdown').style.display = 'none'; 
	}
	setTimeout(countdown, 1000);
}
window.onload = countdown(); // Countdown anstoßen

Die einfache Einbindung in HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta autor="Patrick Saar" />
<title>JS Countdown</title>
</head>
<body>
<div id="countdown" style="	font-family: 'Courier New', Courier, monospace; font-size: 16pt; margin: 30px;"></div>
<script src="js-countdown.js"></script>
</body>
</html>

1,27 KB - Downloads: 2256

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok