jQuery Retro Flip Clock & Countdown Timer Plugin - FlipClock
File Size: | 74.6 KB |
---|---|
Views Total: | 32356 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

FlipClock 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();
6. All default options.
/** * The clock's animation rate. * * Note, currently this property doesn't do anything. * This property is here to be used in the future to * programmaticaly set the clock's animation speed */ animationRate: 1000, /** * Auto start the clock on page load (True|False) */ autoStart: true, /** * The callback methods */ callbacks: { destroy: false, create: false, init: false, interval: false, start: false, stop: false, reset: false }, /** * The CSS classes */ classes: { active: 'flip-clock-active', before: 'flip-clock-before', divider: 'flip-clock-divider', dot: 'flip-clock-dot', label: 'flip-clock-label', flip: 'flip', play: 'play', wrapper: 'flip-clock-wrapper' }, /** * The name of the clock face class in use * 'TwentyFourHourClockFace', 'TwelveHourClockFace' */ clockFace: 'HourlyCounter', /** * The name of the clock face class in use */ countdown: false, /** * The name of the default clock face class to use if the defined * clockFace variable is not a valid FlipClock.Face object */ defaultClockFace: 'HourlyCounter', /** * The default language * 'Spanish', 'Finnish', 'French' * 'Italian', 'Latvian', 'Dutch' * 'Norwegian', 'Portuguese', 'Russian' * 'Swedish', 'Chinese' */ defaultLanguage: 'english', /** * The jQuery object */ $el: false, /** * The FlipClock.Face object */ face: true, /** * The language object after it has been loaded */ lang: false, /** * The language being used to display labels (string) */ language: 'english', /** * The minimum digits the clock must have */ minimumDigits: 0, /** * The original starting value of the clock. Used for the reset method. */ original: false, /** * Is the clock running? (True|False) */ running: false, /** * The FlipClock.Time object */ time: false, /** * The FlipClock.Timer object */ timer: false
Changelog:
2021-01-28
- Package & Doc update
This awesome jQuery plugin is developed by objectivehtml. For more Advanced Usages, please check the demo page or visit the official website.