JavaScript
Countdown mit JavaScript
- Details
- Veröffentlicht am Montag, 02. Februar 2009 12:34
- Geschrieben von Jan Pionzewski
Am 01.03.2009 findet auf Ihrer Webseite ein Ereignis statt? Oder geht der Relaunch Ihrer Webseite am 20.02 um 12:00 Mittags online? Ein Computerspiel wird am 15.03. veröffentlicht? Für einen Countdown gibt es, wie Sie anhand dieser Beispiele sehen können, viele Einsatzmöglichkeiten. Mittels JavaScript können Sie für Ihre Besucher einen Countdown erstellen. Dieser zeigt in Tagen, Stunden, Minuten und Sekunden an, wie lange es noch dauert, bis ein bestimmtes Ereignis stattfinden wird.
Lesen Sie in diesem Artikel, wie Sie einen Countdown mit JavaScript erstellen.
Countdown mit JavaScript erstellen
1. Schritt: JavaScript im <head>...</head>-Bereich
Damit der Countdown auf Ihrer Webseite funktioniert, müssen Sie zuerst das JavaScript, welches den Countdown erzeugt, in den <head>...</head>-Bereich Ihrer Webseite einfügen. Bitte vergessen Sie nicht, die Variablen entsprechend anzupassen. Dazu noch ein kleiner Hinweis: Wenn Sie den Variablen CountdownMinute und CountdownSekunde jeweils den Wert 0 zuweisen, gibt das Script in der Anzeige nur die verbleibenden Tage an.Beispiel:
<script language="Javascript">
<!--
var CountdownJahr = 2009;
var CountdownMonat = 6;
var CountdownTag = 5;
var CountdownStunde = 12;
var CountdownMinute = 30;
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;
if(Jahre > 1 || Jahre == 0)
{
CountdownText += Jahre + " Jahre ";
}
else if(Jahre == 1)
{
CountdownText += Jahre + " Jahr ";
}
}
if(Rest >= 86400)
{
var Tage = Math.floor(Rest/86400);
Rest = Rest-Tage*86400;
if(Tage > 1 || Tage == 0)
{
CountdownText += Tage + " Tage ";
}
else if(Tage == 1)
{
CountdownText += Tage + " Tag ";
}
}
if(Rest >= 3600)
{
var Stunden = Math.floor(Rest/3600);
Rest = Rest-Stunden*3600;
if(Stunden > 1 || Stunden == 0)
{
CountdownText += Stunden + " Stunden ";
}
else if(Stunden == 1)
{
CountdownText += Stunden + " Stunde ";
}
}
if(Rest >= 60)
{
var Minuten = Math.floor(Rest/60);
Rest = Rest-Minuten*60;
if(Minuten > 1 || Minuten == 0)
{
CountdownText += Minuten + " Minuten ";
}
else if(Minuten == 1)
{
CountdownText += Minuten + " Minute ";
}
}
if(Rest > 1 || Rest == 0)
{
CountdownText += Rest + " Sekunden ";
}
else if(Rest==1)
{
CountdownText += Rest + " Sekunde ";
}
document.getElementById('Countdown').innerHTML = CountdownText;
window.setTimeout("CountdownAnzeigen()", 1000);
}
//-->
</script>
2. Schritt: Den <body>-Tag mit der Funktion onLoad belegen
Dem <body>-Tag muss nun noch eine Funktion hinzugefügt werden.Beispiel:
<body onLoad="CountdownAnzeigen();">
3. Schritt: Den Countdown in die Webseite einfügen
Was jetzt noch fehlt, ist der Eintrag an der Stelle Ihrer Webseite, wo der Countdown angezeigt werden soll.Beispiel:
<span id="Countdown"></span>
Damit wäre der eigene Counter erstellt und einsatzbereit.
