Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
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

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

Abbrechen