Create Simple JQuery Flip Countdown Timer – flipclockjs

If you are running any deals or auction sites then displaying countdown timer with running deals is great idean that’s why In this post I am going to share a jQuery plugin to create fast countdown timer for your deals/auction/coming soon page. FlipClock is a jQuery plugin for creating a clock/timer/countdown that displays information in a digital format on a split flap display.

Creating Countdown Timer

In below example I am going to create a simple new year coutdown timer with the help of flipclockjs plugin.


Include flipclock.css CSS and flipclock.min.js JS library just after latest jQuery Library

<link rel="stylesheet" href="flipclock.css">
<script src="//"></script>
<script src="flipclock.min.js"></script>


Create your countdown clock.

<div class="clock"></div>


For creating new year countdown get the current date and Set some date in the future. In this case, it’s always Jan 1 and Calculate the difference in seconds between the future and current date and pass diff in FlipClock countdown.

<script type="text/javascript">
            var clock;
            $(document).ready(function() {
                var currentDate = new Date();
                var futureDate  = new Date(currentDate.getFullYear() + 1, 0, 1);
                var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
                clock = $('.clock').FlipClock(diff, {
                    clockFace: 'DailyCounter',
                    countdown: true

See live demo and download source code.


Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.