Flip Clock is a jQuery plugin that creates a split-flap style digital clock and countdown timer. The display can be fully customized with CSS and controlled via a developer API. Installation requires including the FlipClock CSS, creating a container element, and loading jQuery plus the FlipClock script. Initialization is performed with $('.clock').FlipClock({}) and supports options such as clockFace, autoStart, and callbacks. Time is set with setTime, countdown mode toggled with setCountdown(true), and operation started with start(). Several default options and CSS class names are provided for customization and event handling.
Flip Clock is a jQuery plugin for creating a clock & countdown timer that displays information in a digital format on a split flap display. The clock & countdown timer can be fully customized via CSS and full-featured developer API. How to use it: 1. Include required FlipClock CSS in the head section of your page. <link rel="stylesheet" href="/path/to/compiled/flipclock.css" /> 2. Create a container for the clock. <div class="clock"></div> 3. Include jQuery library and the jQuery FlipClock plugin at the bottom of the page. <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/compiled/flipclock.min.js"></script>
4. Initialize the flip clock. var clock = $('.clock').FlipClock({ clockFace: 'DailyCounter', autoStart: false, callbacks: { stop: function() { $('.message').html('The clock has stopped!') } } }); 5. Set a time you'd like to countdown from. // set time clock.setTime(220880); // countdown mode clock.setCountdown(true); // start the clock clock.start();
Collection
[
|
...
]