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
|
|||
|
|
9 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