jQuery Flip Clock Plugin - FlipClock.js

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

Add the css below to your html page

<link rel="stylesheet" href="../compiled/flipclock.css">

Create a container where you want to render Flip Clock

<div class="clock" style="margin:2em;"></div>
<div class="message"></div>

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>