Create Simple JQuery Flip Countdown Timer – Flipclock Js

1,531

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

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

Social Media Auto Publish Powered By : XYZScripts.com