Was haben Downloadsites die noch auf ihre Werbung aufmerksam machen wollen, Browsergames in denen der aktuelle Auftrag abgearbeitet wird, Releases von Spielen, und die Zeit vor Silvester gemeinsam?
Einen Countdown!
Wie man so einen implementiert wollen wir uns nun ansehen.
Plain JavaScript Countdown
Als Beispiel wollen wir einen Countdown realisieren, der die Sekunden bis Neujahr 2012 anzeigt. Javascript ist dabei unser Freund. Diesmal!
Als aller erstes erzeugen wir uns zwei Objekte, eines für den jetztigen Zeitpunkt und eines für Neujahr 2012, dann berechnen wir uns die Differenz aus den beiden Zeiten:
var jetzt = new Date(); var neujahr = new Date(2012,01,01,0,0,0); var secsLeft = Math.floor((neujahr.getTime() - jetzt.getTime()) / 1000);
Diesen Teil des Codes stecken wir zwischen den <head> Tag der Webseite. Die Differenz müssen wir durch 1000 rechnen, da wir uns auf Millisekundenebene befinden und für unsere Anzeige lediglich die Sekunden relevant sein sollen. Math.floor verwenden wir, um ganze Zahlen anzuzeigen.
Dies müssen wir nun noch im HTML anzeigen, dazu benötigen wir zuerst ein Element mit der id counter im body des html codes, dieses befüllen wir dann regelmäßig mittels:
document.getElementById("counter").innerHTML = text;
All das fassen wir in einer Funktion zusammen z.B.
function countdown(){
Damit das Script nun regelmäßig ausgeführt wird rufen wir es rekursiv erneut auf mit einem Versatz von 1000 Millisekunden, also einer Sekunde.
window.setTimeout("countdown()", 1000);
Dies fügen wir als letzte Zeile in der vorher erstellten Funktion ein.
Die Funktion ist nun fertig, doch muss sie noch gestartet werden. Hier sind wir schon zu den ersten kleinen Kunstgriffen gezwungen, damit der Counter nicht nur im Firefox sondern auch im Internetexplorer seine Arbeit tut.
if (window.addEventListener) {
window.addEventListener('load', countdown, false);
} else if (window.attachEvent) {
window.attachEvent('onload', countdown);
}
Der Internetexplorer kennt die Methode addEventListener nicht sondern verwendet stattdessen attachEvent.
Hier nochmal das Gesamtwerk:
<html>
<head>
<script language="javascript" type="text/javascript">
function countdown(){
var jetzt = new Date();
var neujahr = new Date(2012,01,01,0,0,0);
var secsLeft = Math.floor((neujahr.getTime() - jetzt.getTime()) / 1000);
if(secsLeft > 0){
var text = "Noch " + secsLeft + " Sekunden bis Neujahr 2012!";
} else {
var text = "Es ist bereits 2012!";
}
document.getElementById("counter").innerHTML = text;
window.setTimeout("countdown()", 1000);
}
if (window.addEventListener) {
window.addEventListener('load', countdown, false);
} else if (window.attachEvent) {
window.attachEvent('onload', countdown);
}
</script>
<p id="counter">Noch 26665457 Sekunden bis Neujahr 2012!<p>
</p>
</body>
</html>
Eigentlich recht simpel und gradlinig. Doch wie wir gesehen haben gab es schon kleinere Probleme durch die Browserdiversifikation . Um den Code der eigentlichen Seite übersichtlich und schlank zu halten greife ich daher gerne auf entsprechende JS Libraries zurück.
JQuery Javascript Countdown
Dafür bauen wir zuerst JQuery in unserer Beispiel-Webseite im Head einbinden:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>Die JQuery Standardlibrary bietet viele Funktionen, auf die man aufbauen kann. Damit sie selbst nicht zu aufgebläht und überladen wird, sind Zusatzfunktionen in Plugins ausgelagert. Deshalb besorgen wir uns noch von der Jquery-Homepage http://plugins.jquery.com/project/countdown2 das zugehörige Plugin und binden es ebenfalls ein im Head ein:
<script type="text/javascript" src="jquery.countdown.min.js"></script>Dann mussen wir noch den Javascript Codeteil abändern:
<script type="text/javascript">
$(document).ready(function(){
var newYear = new Date(2012,1,1,0,0,0);
$('#counter').countdown({unitl: newYear, format: 'S'});
});
</script>
Auch hierbei darf der Javascript Code erst loslegen, nachdem das Dokument fertig ist. $(document).ready() ist dafür der Standardaufruf mittels JQuery. Darin erzeugen wir uns wieder ein Date Objekt, dermal das Zieldatum. Dann müssen wir noch das Plugin damit füttern. Per JQuery wird das Element mit der ID #Counter selektiert und dort ein .counter eingefügt, dem wir das Datum als until Parameter übergeben, außerdem legen wir noch ein Format fest, denn wir wollen nur Sekunden anzeigen lassen. Fertig!
Das ganze lässt sich noch weiter feinabstimmen: http://keith-wood.name/countdownRef.html Auf der Dokumentationsseite sind die Möglichkeiten das Plugin zu konfigurieren beschrieben. Sie enthalten unter anderem die Möglichkeit eigene Labels zu vergeben, so spart man sich für jede Sprache die die Website unterstützt die lokalisierte Fassung einzubinden.
Freilich hat der Homepagebesucher mit der JQuery Bibliothek und dem zugehörigen Plugin deutlich mehr Netzwerktraffic zu verbuchen, doch hat man damit für die Übersichtlichkeit und Wartbarkeit einiges gewonnen. Als weiteren Pluspunkt hat man das Gemurkse ob Internetexplorer oder ein anderer Browser an die Bibliothek delegiert. Und ob des Traffics bleibt zu sagen, dass sich das recht bald durch Synergieeffekte durch den Einsatz von JQuery bei anderen Teilen der Homepage bezahlt macht.
Fröhliches Runterzählen!
Schreibe einen Kommentar