Post
Ask Question

Count down JQuery Plugin

Here, I will explain how to use JQurey plug-in for count down.

Description

sometimes we see in the many website running timer for the countdown that is indicating how many time left in something happening, like restaurant opening, product selling, new tv show coming etc. A simple, easy-to-use yet highly customizable jquery countdown plug-in which helps you count down to any special event.

For doing this we can use count down jquery plugin with lots of animated functionalities.

Step 1

create a web web application like java web application or asp.net web application.

In my case I used asp.net web application.

Download JQuery count down plugin which is easily available on Google.

Step 2

In html head block we use this plugin and write a small jquery function for showing count down in div container and css for html elements.

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">    
  2.     </script>    
  3.     <script src="Scripts/jquery.countdown.js" type="text/javascript"></script>    
  4.     
  5. <script type="text/javascript">    
  6.         $(function () {    
  7.     
  8.             $('#counter').countdown({    
  9.                 image: 'images/digits.png',    
  10.                 startTime: '01:10:40:10',    
  11.                 timerEnd: function() { alert('Time up!'); }    
  12.             });    
  13.     
  14.         });    
  15.     
  16.  </script>    
  17. <style type="text/css">    
  18.            
  19.         .cntSeparator    
  20.         {    
  21.             font-size: 60px;    
  22.             margin: 10px 8px;    
  23.             color: #000;    
  24.         }    
  25.             
  26.         .desc div    
  27.         {    
  28.             float: left;    
  29.             font-family: Arial;    
  30.             width: 80px;    
  31.             margin-right: 60px;    
  32.             font-size: 15px;    
  33.             font-weight: bold;    
  34.             color: Blue;    
  35.         }    
  36.     </style>   

Step 3

In html body we add some html elements for showing count down.
  1. <h2 style="color: #00FF00">  
  2.         Count down Script  
  3.     </h2>  
  4.     <center>  
  5.     <div id="counter">  
  6.     </div>  
  7.     <div class="desc">  
  8.         <div>  
  9.             Days</div>  
  10.         <div>  
  11.             Hours</div>  
  12.         <div>  
  13.             Minutes</div>  
  14.         <div>  
  15.             Seconds</div>  
  16.     </div>  
Run the application and check count down time. 
Next Recommended Reading Autocomplete Input Box Using "Typeahead" jQuery Plugin