FlipClock.js is a customizable countdown plugin, it has an awesome flip effect and requires a few files to work properly. The minified source contains all the clock faces for maximum portability. The primary features of Flip Clock Plugin:
- Use as a clock
- Use as a timer
- Use as a countdown
- Themeable using pure CSS
- Clean & Dry Syntax
- Abstract everything into reusable objects
- Full-Featured Developer API to create custom “Clock Faces”
Live Demo
1. DailyCounter
2. Countdown Stop Callback
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet" href="../compiled/flipclock.css">
2. HTML
Create a container where you want to render Flip Clock
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
3. Javascript
Load jQuery library together with the Flip Clock library into your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../compiled/flipclock.js"></script>
<script type="text/javascript">
var clock;
$(document).ready(function () {
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function () {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(220880);
clock.setCountdown(true);
clock.start();
});
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.