Post
Ask Question

How to jQuery Countdown Timer Script Example in ASP.NET

Basic Usage
  1. $('#counter').countdown({  
  2.     startTime: "01:12:32:55"  
  3. });  
  4. Complete Usage  
  5. $('#counter').countdown({  
  6.     stepTime: 60,  
  7.     format: 'hh:mm:ss',  
  8.     startTime: "12:32:55",  
  9.     digitImages: 6,  
  10.     digitWidth: 53,  
  11.     digitHeight: 77,  
  12.     timerEnd: function() {  
  13.         alert('end!!');  
  14.     },  
  15.     image: "digits.png"  
  16. });  
Check
  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  3.     <head>  
  4.         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
  5.         <title>jQuery Countdown plugin Example in asp.net</title>  
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  7.         <script src="jquery.countdown.js" type="text/javascript"></script>  
  8.         <script type="text/javascript">  
  9. $(function() {  
  10. $('#counter').countdown({  
  11. image: 'digits.png',  
  12. startTime: '01:12:12:00'  
  13. });  
  14. $('#counter_2').countdown({  
  15. startTime: '00:10',  
  16. format: 'mm:ss',  
  17. digitImages: 6,  
  18. digitWidth: 53,  
  19. digitHeight: 77,  
  20. timerEnd: function() { alert('end!'); },  
  21. image: 'digits.png'  
  22. });  
  23. });  
  24. </script>  
  25.         <style type="text/css">  
  26. br { clear: both; }  
  27. .cntSeparator {  
  28. font-size: 54px;  
  29. margin: 10px 7px;  
  30. color: #000;  
  31. }  
  32. .desc { margin: 7px 3px; }  
  33. .desc div {  
  34. float: left;  
  35. font-family: Arial;  
  36. width: 70px;  
  37. margin-right: 65px;  
  38. font-size: 13px;  
  39. font-weight: bold;  
  40. color: #000;  
  41. }  
  42. </style>  
  43.     </head>  
  44.     <body>  
  45.         <div id="counter"></div>  
  46.         <div class="desc">  
  47.             <div>Days</div>  
  48.             <div>Hours</div>  
  49.             <div>Minutes</div>  
  50.             <div>Seconds</div>  
  51.         </div>  
  52.         <br />  
  53.         <br />  
  54.         <br />  
  55.         <div id="counter_2"></div>  
  56.         <div class="desc">  
  57.             <div>Minutes</div>  
  58.             <div>Seconds</div>  
  59.         </div>  
  60.     </body>  
  61. </html>