JQuery Countdown Timer

This tutorial help you how to place countdown timer in our website, there is not need to write any code for that because we have plenty of plugins available if you start search and it is very easy to modify the codes and organize to our requirements , lets see the simple code


as my best one is in among plugins flipclock.js and i used in many websites becasue it's very easy to understand the code easy to modify and easy to style with our custom style sheets, Donwload the plugin form flipclockjs website, The below html code take a div and give a class name clock it's a default class name if you want you can modify the name in css flipclock.css file

HTML

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

in the jquery code you must include the jquery library until it wont work because all plugins are associated with mail jquery library 

jQuery

<script type="text/javascript" src="jquery-1.12.2.min.js"></script>

<script src="flipclock.js"></script>

<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,

   });

 });

 </script>

Live Demo