 |
| FlipClock - Countdown Timer Retro With jQuery Plugin |
FlipClock is a jQuery plugin for creating retro-style clocks and countdown timers that display information in digital format on separate flap displays.
The clock and countdown timer are fully customizable via CSS and a 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
Live Demo
See the Pen Untitled by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- FlipClock-master.zip
- Size :
- 74.6KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT