Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Introduction

Here I will explain how to show or create countdown timer script in
jQuery using asp.net.

Description:
  
In previous articles I explained Redirect to another page after 5 seconds,
Get Current Datetime, Auto refresh page , Disable right click on image and many articles relating to JQuery. Now I will explain how to implement or show current time on webpage using jQuery.

In many websites we will some timers running and saying that this much time left to launch our new product or this much time you need to wait to download our product like this

We can implement this functionality easily by using jQuery Countdown plugin. This will show images like clock style that change with a great animation.

Usage of this plugin will be like this

Basic Usage

$('#counter').countdown({ startTime: "01:12:32:55" });

Complete Usage

$('#counter').countdown({
stepTime: 60,
format: 'hh:mm:ss',
startTime: "12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function() { alert('end!!'); },
image: "digits.png"
});
 Check below example to implement this one


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>jQuery Countdown plugin Example in asp.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="jquery.countdown.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

$('#counter').countdown({
image: 'digits.png',
startTime: '01:12:12:00'
});

$('#counter_2').countdown({
startTime: '00:10',
format: 'mm:ss',
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function() { alert('end!'); },
image: 'digits.png'
});
});
</script>
<style type="text/css">
br { clear: both; }
.cntSeparator {
font-size: 54px;
margin: 10px 7px;
color: #000;
}
.desc { margin: 7px 3px; }
.desc div {
float: left;
font-family: Arial;
width: 70px;
margin-right: 65px;
font-size: 13px;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div id="counter"></div>
<div class="desc">
<div>Days</div>
<div>Hours</div>
<div>Minutes</div>
<div>Seconds</div>
</div>
<br />
<br />
<br />
<div id="counter_2"></div>
<div class="desc">
<div>Minutes</div>
<div>Seconds</div>
</div>
</body>
</html>

Demo

Download


If you want to know about this check this jQuery Countdown plugin

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

19 comments :

Manoj said...

I like it..

surendrakumar nimmagadda said...

ghgd

Anonymous said...

Good one.... but not working in IE......

Suresh Dasari said...

It is working in all browsers. i checked then only i posted it...

Gunjan Bhasin said...

Your demo is working properly but when I am applying it into my project I am not getting the expected result. :( Please help.

Anonymous said...

How To Assign Value AT Page Load Event in

"startTime: '00:00:02:00'"

Nitin said...

Noe working in asp.Net 2.0

vinayak said...

hi
Its awesom timer...
thnx for the demo.
But its Height and width is too much.
I want to reduce the height - width of the timer.
I tried it but i was not succeeded.
plz gimme some idea.
Thanks in advance.

Kailash said...

Not working in IE.8

shubhangi said...

hi.this is nice article,but can you post to jquery plugins for increment counter...PLZ

praveen s said...

Thanks I like it.......

praveen s said...

its fine but when i select any events it will reset...how i can continue the countdown the timer with out reset it ... Thanks in Advance

Anonymous said...

Can some use that for 3 digits in days?

بشار حامد said...

I want to get time from database ? how

professionalsna said...

Thanks for the Great Article, kindly help me in how could i call an asp.net c# event when time is 0
means i want to run a method when time is 0.
waiting for your reply.

Syed Furquan Ahmed said...

I tried in Chrome its working fine, but i need it for IE dear, its not working on IE.

Sugesh M said...

Hi Suresh,

Its Working for me in all browsers. But i want to update the time value in DB. How to get the time value in jquery. Please advice

Anonymous said...

The code subdirectory '/jQueryCountDown/App_Code/CSCode/' does not exist.

Please solve this error

Syed Ali said...

How can i pause countdown

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.