JavaScript Animated Counter
by Piotr Sałaciak (psalaciak 2011)
JavaScript
Usage examples1
If this code above is badly formatted, then try to use a different browser. IE or Chrome should display this code much better.
Classic counter
Clock
Text displayer
Countdown
Anti-bot security
Date displayer
Random numbers
Various fonts

Classic usage

The most common use of a counter. But that's not all, check out other examples.
Hours
Minutes
Seconds

Alphabet

This javascript counter is much more than just a counter. It can use any character set: already defined like numeric, alphabetic, alphanumeric or defined by You.

Time left to the next century

Years
Days

Hours
Minutes
Seconds

Contact form

Subject
Your e-mail
Security code

Anti-bot security

Note that this kind of anti-spam security prevents only from classic spam bots and it shouldn't be used with a security-sensitive forms (like logging in, user registering etc). Note, that this also won't prevent You from bots dedicated for Your website.

Random date

Scroll direction

Note that every counter here is scrolled in a different way. First one is scrolled downwards and second is scrolled upwards. Thrid counter has a mixed scroll style. This means that for every digit (or character) direction is picked regarding the current and next digit distance.

Features2
Supported browsers3
Supported browser logos
Documentation4

Integration

Placing Counter on Your website can be made in a 3 simple steps.
1. Add JavaScript and CSS definitions.
2. Define HTML element, which You want to set as a counter container.
3. Add JavaScript code which will create Your counter.
<script type="text/javascript" src="counter.js"></script>
<link rel="stylesheet" type="text/css" href="counter.css" />

<div id="my_counter"></div>

<script type="text/javascript">

	var config = {
		digitsNumber : 5,
		direction : Counter.ScrollDirection.Upwards, 
		characterSet : Counter.DefaultCharacterSets.numericUp,
		charsImageUrl : "images/numeric_up_blackbg5.png",
		markerImageUrl : "marker.png"
	};
	
	var myCounter = new Counter("my_counter", config);

</script>

Look at the configuration object property list to find out how Counter can be configured. Note, that some configuration properties and also Counter properties are of integer type, but instead of simple integer value an enumeration is used for a better value description.

After Counter object is created, You can set it's current value by calling this method:
	myCounter.setValue(12345, 2000);
Example above sets value "12345" for the counter and the animation duration is 2000 miliseconds.

Counter Object

Properties

Name Type Default value
animationDurationNumber (integer)50
Number of milliseconds that determines animation duration.
charsImageImagenull
An Image object that holds characters graphic representation.
characterNumberNumber (integer)
Numer of characters that character set has. This value is set while Counter object is being created.
characterSetStringCounter.DefaultCharacterSets.allCharacters
Character set used by the counter. It could be any of the Counter.DefaultCharacterSets property or a specified string (eg. "ABCDEFG")
digitsNumberNumber (integer)6
Numer of digits (characters) that counter is using. For example if it's set to 6 and character set is set to numeric, it can display any number between 0 and 999999.
directionCounter.DefaultCharacterSetsCounter.DefaultCharacterSets.Mixed
Determines animation direction.
extraClassNameObject(see extraClassName object)
This object contains CSS class names for every HTML elements that counter consist of.
intervalTimerIdNumber (integer)null
Timer identificator used to animate counter value change.
isAnimatingBooleanfalse
Determines whether counter is animating right now or not.
markerImageImagenull
An image that is used as an overlay of the counter.
onLoadFunctionnull
This function is called when counter was fully loaded.
onValueChangedFunctionnull
This function is called when counter value has changed.
timeoutTimerIdNumber (integer)null
Timer identificator used to animate counter value change.
valueNumber or String(empty string)
Current counter value.

Methods

Name Parameters Returns
setValuemixed newValue, Number animationDurationvoid
Sets counter value and animates it's change.

Example

myCounter.setValue(123456, 2000);

Counter Configuration Object

Properties

Name Type Default value
animationDurationNumber (integer)50
Number of milliseconds that determines animation duration.
charsImageUrlStringnull
URL to an image that holds characters graphic representation.
characterSetStringCounter.DefaultCharacterSets.allCharacters
Character set used by the counter. It could be any of the Counter.DefaultCharacterSets property or a specified string (eg. "ABCDEFG")
digitsNumberNumber (integer)6
Numer of digits (characters) that counter is using. For example if it's set to 6 and character set is set to numeric, it can display any number between 0 and 999999.
directionCounter.DefaultCharacterSetsCounter.DefaultCharacterSets.Mixed
Determines animation direction.
extraClassNameObject(see extraClassName object)
This object contains CSS class names for every HTML elements that counter consist of.
markerImageUrlStringnull
URL to an image that is used as an overlay of the counter.
onLoadFunctionnull
This function is called when counter was fully loaded.
onValueChangedFunctionnull
This function is called when counter value has changed.
valueNumber or String(empty string)
Initial counter value.

extraClassName Object

Properties

Name Type Default value
leftString(empty string)
CSS class name for the most left element
markerString(empty string)
CSS class name for the marker element
innerString(empty string)
CSS class name for inner elements
rightString(empty string)
CSS class name for the most right element
wrapperString(empty string)
CSS class name for the wrapper element

Counter Enumerations

Name Values
Counter.DefaultCharacterSets numericUp : '0123456789',
numericDown : '9876543210',
alphabeticUp : ' ABCDEFGHIJKLMNOPQRSTUVWXYZ',
alphabeticDown : 'ZYXWVUTSRQPONMLKJIHGFEDCBA ',
alphanumericUp : '0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ',
alphanumericDown : '9876543210ZYXWVUTSRQPONMLKJIHGFEDCBA ',
calculator : '0123456789.,+-*/= ',
qwertyKeybord : ' QWERTYUIOPASDFGHJKLZXCVBNM1234567890-=[]\\;\',./~`!@#$%^&*()_+{}|:"<>?',
allCharacters : ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-=[]\\;\',./~`!@#$%^&*()_+{}|:"<>?'
Counter.ScrollDirection Downwards : -1,
Mixed : 0,
Upwards : 1
JavaScript Counterpsalaciak 2011
If You have any question or need some help with integration, feel free to contact me. I'll do my best to assist You.
Please, take a look at my portfolio, maybe You would find something useful there. Piotr Sałaciak