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

jQuery Countdown Timer Script Example in Asp.net

Oct 16, 2012
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

23 comments :

Manoj said...

I like it..

Unknown 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...

Unknown 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

Unknown said...

Thanks I like it.......

Unknown 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?

Anonymous 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.

Sug 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 Shuja said...

How can i pause countdown

Unknown said...

how can i stop it from getting reset every time on page refresh

Anonymous said...

its a nice article, i need to reduce height and width of timer could you please help me out for this..

Anonymous said...

how could i provide the dynamic time span from .cs file for example if i write

DateTime datbinder = DateTime.Now;
DateTime datetomorrow = DateTime.Now.AddDays(3);

TimeSpan timeleft = TimeSpan.FromDays(1);
string timeleftz = datetomorrow.Subtract(datbinder).ToString().Substring(0,10).Replace(".",":");
hddttime.Value = timeleftz;
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp",$('#counter').countdown('digits.png','" + timeleftz + "')", true);

from cs file it is not working

Aleena said...

how to display countdown timer for every row in Gridview?...plz help me

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 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.