Bei vielen Events, Attraktionen und Spezialangeboten läuft ein Countdown. Das kann nervig, aber je nach dem auch sehr amüsant sein. Für deine Homepage kannst so einen "Rückwärtszähler" relativ einfach mit etwas HTML- und JAVA-Script selbst erzeugen. Ich habe für diesen Tipp mit Blue Griffon so ein Script erstellt, das wir jetzt genauer untersuchen werden. Zum Schluss steht dir ein Download bereit, den du beliebig abändern und anpassen kannst.
Am Anfang steht das HTML
Im Editor startest du immer mit einer neuen HTML-Datei. Die hat dann ihre ganz typischen Merkmale: Das Eröffnen-Tag, den meta-Tag, den head, den title-Tag und den body-Tag. Alle eröffneten Tags müsse auch wieder mit dem </…> -Befehl geschlossen werden.
Im Editor startest du immer mit einer neuen HTML-Datei. Die hat dann ihre ganz typischen Merkmale: Das Eröffnen-Tag, den meta-Tag, den head, den title-Tag und den body-Tag. Alle eröffneten Tags müsse auch wieder mit dem </…> -Befehl geschlossen werden.
Startest du dieses Gerüst im Browser, siehst einfach 'mal noch gar nichts, nicht einmal einen Titel! Wir schauen jetzt, wie die ganze Grafik und Funktionen dazu kommen. Teils geschieht das auch mit HTML, die Funktionen (Rechenarbeit) aber nur mit JAVA. Im ersten Teil vom <body> werden das Hintergrundbild und die Schriftarten definiert. Das geschieht mit dem Style- und Span-Attribut. Dann startet mit <script> das eigentliche JAVA-Script. Am Schluss wird mit Var noch der Endpunkt des Countdowns festgelegt.
Die Funktionen mit JAVA
Code-Download zur Weiterentwicklung
Gerne stell ich dir hier den gesamten Code zum Download bereit. Du kannst den Code einfach in eine neue Datei deines Editors kopieren und gleich mit deinen Anpassungen loslegen! Du kannst das Tool aber auch direkt hier live ausprobieren.
Gerne stell ich dir hier den gesamten Code zum Download bereit. Du kannst den Code einfach in eine neue Datei deines Editors kopieren und gleich mit deinen Anpassungen loslegen! Du kannst das Tool aber auch direkt hier live ausprobieren.
deine Kommentare, Fragen und Kritik zu diesem Beitrag >> hier deponieren.