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.
countdown

Creating Countdown Timer

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

Libraries

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

<!--CSS-->
<link rel="stylesheet" href="flipclock.css">
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="flipclock.min.js"></script>

HTML

Create your countdown clock.

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


JS

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() {
                // Grab the current date
                var currentDate = new Date();
                // Set some date in the future. In this case, it's always Jan 1
                var futureDate  = new Date(currentDate.getFullYear() + 1, 0, 1);
                // Calculate the difference in seconds between the future and current date
                var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
                // Instantiate a coutdown FlipClock
                clock = $('.clock').FlipClock(diff, {
                    clockFace: 'DailyCounter',
                    countdown: true
                });
            });
        </script>

See live demo and download source code.

DEMO | DOWNLOAD

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.