JavaScript Animated Counter

Documentation5

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
animationDuration	Number (integer)	50
	Number of milliseconds that determines animation duration.
charsImage	Image	null
	An Image object that holds characters graphic representation.
characterNumber	Number (integer)
	Numer of characters that character set has. This value is set while Counter object is being created.
characterSet	String	Counter.DefaultCharacterSets.allCharacters
	Character set used by the counter. It could be any of the Counter.DefaultCharacterSets property or a specified string (eg. "ABCDEFG")
decimalPoints	Number (integer)	2
	Numer of decimal points.
decimalSeparator	String	.
	Character used as a decimal separator. Can be anything, but most likely dot or comma should be used.
digitsNumber	Number (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.
direction	Counter.DefaultCharacterSets	Counter.DefaultCharacterSets.Mixed
	Determines animation direction.
extraClassName	Object	(see extraClassName object)
	This object contains CSS class names for every HTML elements that counter consist of.
intervalTimerId	Number (integer)	null
	Timer identificator used to animate counter value change.
isAnimating	Boolean	false
	Determines whether counter is animating right now or not.
markerImage	Image	null
	An image that is used as an overlay of the counter.
onLoad	Function	null
	This function is called when counter was fully loaded.
onValueChanged	Function	null
	This function is called when counter value has changed.
postfixText	String	(empty string)
	Character that is shown to the right of the counter.
prefixText	String	(empty string)
	Character that is shown to the left of the counter.
scrollAnimation	Counter.ScrollAnimation	Counter.ScrollAnimation.FixedTime
	Determines scroll animation type.
showDecimalSeparator	Boolean	false
	Determines whether decimal separator is shown or not.
showThousandsSeparator	Boolean	false
	Determines whether thousands separator is shown or not.
thousandsSeparator	String	,
	Character used as a thousands separator. Can be anything, but most likely dot or comma should be used.
timeoutTimerId	Number (integer)	null
	Timer identificator used to animate counter value change.
value	Number or String	(empty string)
	Current counter value.

Methods

Name	Parameters	Returns
add	mixed addValue, Number animationDuration	void
	Increments current value by the given decimal or integer value and animates counter's change. Example myCounter.add(1, 1000);
setValue	mixed newValue, Number animationDuration	void
	Sets counter value and animates it's change. Example myCounter.setValue(123456, 2000);

Counter Configuration Object

Properties

Name	Type	Default value
animationDuration	Number (integer)	50
	Number of milliseconds that determines animation duration.
charsImageUrl	String	null
	URL to an image that holds characters graphic representation.
characterSet	String	Counter.DefaultCharacterSets.allCharacters
	Character set used by the counter. It could be any of the Counter.DefaultCharacterSets property or a specified string (eg. "ABCDEFG")
decimalPoints	Number (integer)	2
	Numer of decimal points.
decimalSeparator	String	.
	Character used as a decimal separator. Can be anything, but most likely dot or comma should be used.
digitsNumber	Number (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.
direction	Counter.DefaultCharacterSets	Counter.DefaultCharacterSets.Mixed
	Determines animation direction.
extraClassName	Object	(see extraClassName object)
	This object contains CSS class names for every HTML elements that counter consist of.
markerImageUrl	String	null
	URL to an image that is used as an overlay of the counter.
onLoad	Function	null
	This function is called when counter was fully loaded.
onValueChanged	Function	null
	This function is called when counter value has changed.
postfixText	String	(empty string)
	Character that is shown to the right of the counter.
prefixText	String	(empty string)
	Character that is shown to the left of the counter.
scrollAnimation	Counter.ScrollAnimation	Counter.ScrollAnimation.FixedTime
	Determines scroll animation type.
showDecimalSeparator	Boolean	false
	Determines whether decimal separator is shown or not.
showThousandsSeparator	Boolean	false
	Determines whether thousands separator is shown or not.
thousandsSeparator	String	,
	Character used as a thousands separator. Can be anything, but most likely dot or comma should be used.
value	Number or String	(empty string)
	Initial counter value.

extraClassName Object

Properties

Name	Type	Default value
left	String	(empty string)
	CSS class name for the most left element
marker	String	(empty string)
	CSS class name for the marker element
inner	String	(empty string)
	CSS class name for inner elements
right	String	(empty string)
	CSS class name for the most right element
wrapper	String	(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.ScrollAnimation	FixedTime : 0, FixedSpeed : 1, SlotMachine : 2
Counter.ScrollDirection	Downwards : -1, Mixed : 0, Upwards : 1

Counter type	Prefix Sign	Replace with text when End Value is reached [html] Leave empty if You don't want counter to disappear <h2>Counting finished!</h2>
Animation speed	Postfix Sign
Scroll Direction	Start Value
Scroll Animation	End Value
Number of digits	Increment

JavaScript Animated Counter

Classic usage

Currency

Alphabet

Time left to the next century

Contact form

Anti-bot security

Random date

Scroll direction

Scroll animation

Installation code for configured counter

Integration

Counter Object

Properties

Methods

Example

Example

Counter Configuration Object

Properties

extraClassName Object

Properties

Counter Enumerations

Subject
Your e-mail


Security code