|
|
Here’s a simple way to display a running counter using jQuery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display a Counter</title>
<style type="text/css">
#displayCounter{
font-size:42px;
font-family:Georgia;
}
</style>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(function() {
var cnt = 0;
var counter = setInterval(function() {
if (cnt < 20) {
$('#displayCounter').html(cnt);
cnt++;
}
else {
clearInterval(counter);
$('#displayCounter').html("Timeout!!");
}
}, 1000);
});
</script>
</head>
<body>
<div id="displayCounter"></div>
</body>
</html>
The counter runs from 0 to 20 and then stops. You can perform any action when the counter stops. For demo purposes, I have displayed the string ‘Timeout!!’
See a Live Demo
'Like' us on our FaceBook page if you find this blog useful. Thanks!
Did you like this post?
|
|
||
|
|
|
Save on Delicious |
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
About The Author
comments
6 Responses to "Display a Running Counter Using jQuery"Hi Suprotim
Very nice piece of code.
One question, is there any way to add a comma as a thousand separator?
So that the numbers shown look like 2,000.
Thanks
Stuart
Thanks Stuart. You should take a look at the jQuery Globalization Plugin (https://github.com/nje/jquery-glob) which will take care of string, date, and number formatting and parsing in your application.
If you need anything simpler, there are plenty of scripts on the net that show you how to add commas to numbers. Check one here - http://stackoverflow.com/questions/1990512/add-comma-to-numbers-every-three-digits-using-jquery
Only just coming back to this,
I tried this
$(function() {
var cnt = 990;
var counter = setInterval(function() {
if (cnt < 2000) {
$('#displayCounter').html(cnt);
cnt++;
}
else {
clearInterval(counter);
$('#displayCounter').html("2000");
}
}, 20);
});
$.fn.digits = function(){
return this.each(function(){
$(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
})
}
$(".points").digits();
and on the page I add the class pointer to your div.
But I just cannot get it working. Have you any ideas?
Done it..
This code also pulls in the numbers to count to from a database.
$(function() {
var cnt = 0;
var counter = setInterval(function() {
if (cnt < [cfdb-count form="*"]) {
$('#displayCounter').html(commarise(cnt));
cnt++;
}
else {
clearInterval(counter);
$('#displayCounter').html(commarise("[cfdb-count form="*"]"));
}
}, 500);
});
function commarise(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Hi,
Nice peice of code.. just one query.
I used this code as
Note: If no activity then this session will close automatically in <div id="displayCounter"></div> seconds.
All in one line. But in the live page, it shows as
Note: If no activity then this session will close automatically in
4
seconds.
Do you see the problem? There is a new line between previous line, counter and next word? How to get ride of this? Where it comes from?
Have no clue....
Could be an aligning issue. Just put it in different div's and align them using a post I had written earlier http://www.devcurry.com/2009/08/aligning-multiple-divs-using-css.html
Post a Comment