JQuery Countdown Timer | Lessoncup Programming Blog

Wednesday, 6 April 2016

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


<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 


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




Live Demo


  1. very simple for real! edubirdie

  2. They managed our expectations and delivered more than they promised.
    top UX designer

  3. Trust me hire this method, they are the greatest!
    San Francisco design firms

  4. I’m very happy which i satisfied all of them. Their own technique together with customer service is A++,
    user experience firms San Francisco


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons