Introduction:
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 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
|
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 Email
|
|||
23 comments :
I like it..
ghgd
Good one.... but not working in IE......
It is working in all browsers. i checked then only i posted it...
Your demo is working properly but when I am applying it into my project I am not getting the expected result. :( Please help.
How To Assign Value AT Page Load Event in
"startTime: '00:00:02:00'"
Noe working in asp.Net 2.0
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.
Not working in IE.8
hi.this is nice article,but can you post to jquery plugins for increment counter...PLZ
Thanks I like it.......
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
Can some use that for 3 digits in days?
I want to get time from database ? how
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.
I tried in Chrome its working fine, but i need it for IE dear, its not working on IE.
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
The code subdirectory '/jQueryCountDown/App_Code/CSCode/' does not exist.
Please solve this error
How can i pause countdown
how can i stop it from getting reset every time on page refresh
its a nice article, i need to reduce height and width of timer could you please help me out for this..
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
how to display countdown timer for every row in Gridview?...plz help me
Note: Only a member of this blog may post a comment.