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.

Libraries

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

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

<script src="//code.jquery.com/jquery-latest.min.js">script>
<script src="flipclock.min.js">script>

HTML

Create your countdown clock.

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.

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.

Related