<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.
myCounter.setValue(12345, 2000);Example above sets value "12345" for the counter and the animation duration is 2000 miliseconds.
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") | ||
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. | ||
timeoutTimerId | Number (integer) | null |
Timer identificator used to animate counter value change. | ||
value | Number or String | (empty string) |
Current counter value. |
Name | Parameters | Returns |
setValue | mixed newValue, Number animationDuration | void |
Sets counter value and animates it's change.
Example
myCounter.setValue(123456, 2000);
|
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") | ||
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. | ||
value | Number or String | (empty string) |
Initial counter value. |
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 |
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 |