Entwicklung & Design

FlipClock.js: Flexibles Skript für Uhren, Countdowns und Timer

Es gibt unzählige Countdown- und Uhr-Skripte. FlipClock.js vereint die Funktionen vieler dieser Zeitmesser und  versucht, sie in einer nachhaltigen Bibliothek zusammenzufassen. Wir stellen euch das Skript und dessen Möglichkeiten kurz vor.

FlipClock.js wurde kreiert, weil die unzähligen Skripte für Uhren, Stoppuhren und Countdowns den Bedürfnissen der Macher nicht entsprachen. Die Lösungen waren nicht abstrakt genug, um sie in der Tiefe anpassen zu können, ohne den Code umzuschreiben. Einige Bibliotheken waren voll mit Abfragen, während andere mit zu vielen Hardcode-Lösungen arbeiteten. FlipClock.js soll es anders machen und mit einer erweiterteren API in allen für Uhren denkbaren Szenarien zum Einsatz kommen können.

FlipClock.js Screenshot

Screenshot: FlipClock.js

FlipClock kann als Uhr, Timer oder Countdown eingesetzt und durch pures CSS gestylt werden. Die Bibliothek bietet eine saubere und überschaubare Syntax und stellt eine eigene Entwickler-API für Steuerung und Erweiterung. Der Flip-Effekt beim Ziffernwechsel ist ein cooler Zusatz-Effekt.

FlipClock.js in deiner Webseite

FlipClock benötigt jQuery und PrefixFree, um zu funktionieren, die Bibliothek selbst muss natürlich ebenfalls mit eingebunden werden.

<script src="/assets/js/libs/jquery.js"></script>
<script src="/assets/js/flipclock/libs/prefixfree.min.js"></script>
<script src="/assets/js/flipclock/flipclock.min.js"></script>

Um eine Uhr zu erzeugen, kannst du in gewohnter jQuery-Syntax ein FlipClock-Objekt erzeugen und einem DOM-Element deiner Wahl zuordnen.

var clock = $('.your-clock').FlipClock({
// ... your options here
});

Im Options-Block übergibst du die nötigen Werte, wie zum Beispiel die Art der Uhr, zusätzliche Klassen, Callback-Funktionen für verschiedene Ereignisse wie den Start und das Stoppen der Uhr und alternative Skins. Mit verschiedenen Methoden lässt sich die FlipClock starten, stoppen, zurücksetzen, auf eine bestimmte Zeit stellen oder auslesen.

Mehr zu den Funktionen, Einsatz- und Anpassungsmöglichkeiten des Skriptes erfährst du auf der offiziellen Seite von FlipClock.js.

Weiterführende Links

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
johnnyvonschlecker
johnnyvonschlecker

Ich kann euch noch das Count Everest Countdown Plugin von Anacoda empfehlen: http://codecanyon.net/item/count-everest-countdown-responsive-jquery-plugin/6466098?ref=Anacoda

Einige der Features:
– Lightning Fast Integration
– No Javascript Knowledge Required
– Easily Extendable and Customizable
– Responsive Example Layouts
– Display Days, Hours, Minutes, Seconds, Deciseconds, Milliseconds with or without Labels
– Every Label is Customizable
– Left-Hand Zeros
– Well Documented
– Performance Optimized
– Callback Functions
– Lots of Options
– Fast Email Support

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung