Creating a counter in HTML5

[giladn55917758]

Hi all,

We're trying to create a simple counter in HTML5, but all I find online is AS3...

We need the numbers to go from 10.000 -> 50.000

Is it possible?

Thanks for your help!

[kglad]

you want something that you click (up or down) to increment or decrement a display?

[giladn55917758]

No, just the running numbers automatically

[kglad]

what are "..running numbers.."?

do you want something that displays numbers incrementing from 10,000 to 50,000 over some time period?

[giladn55917758]

Haha exactly

Thank you for your help!

[kglad · Accepted solution]

var start = 10000;

var end = 50000;

var current = start;

var f = tickerF.bind(this)

createjs.Ticker.addEventListener('tick',f);

function tickerF(){

this.your_tf.text = current;

current++;

if(current>end){

createjs.Ticker.removeEventListener('tick',f);

}

}

[giladn55917758]

THANK YOU !!!

Is there a way to control the speed? To make it go faster?

Thanks!

[kglad]

you're welcome.

you can increase your framerate:

Ticker.framerate = 60;

or you can increment by 2's or 3's etc

[ClayUUID]

As always, directly tweaking Ticker.framerate is not advisable because that overrides the frame rate set in the publish settings.

[giladn55917758]

Thank you kglad - your code really helped.

BTW we were able to control the speed by changing the:

current++; to current = current+7; (could be any number)

[kglad]

you're welcome.

[Nurhamida25024381d3rg]

Hi, thank you for your code, is there a way to set the speed by second using this code? or there is a spesicif number per second? thanks in advance. 

[kglad]

@Nurhamida25024381d3rg 

yes. use setInterval instead of ticker.

@Jonathan22259649im63 

yes, use setInterval and adjust the interval.

[janniklindgren]

Hi kglad,

I'm trying to use your counter in a a animate CC project using gsap. The counter works fine, but I need to be able to delay the starttime for the counter, as I want it to sync with an animation. Is this possible? Thx

[kglad]

add the listener when you want the timer to start.

[janniklindgren]

So easy when you know how Thanks a lot!

[janniklindgren]

Sorry - me again. Is there a way to use the counter twice (e.g. reset it and run it again). Thx so much for your help

[kglad]

call startTickerF whenever you want to start the ticker:

var start;

var end:

var f =tickerF.bind(this);

var current;

startTickerF(10000,50000);  // edit this line to adjust for your start and stop numbers

function startTickerF(startNum,endNum){

start= startNum;

end = endNum;

current = start;

createjs.Ticker.addEventListener('tick',f);

}

function tickerF(){

this.your_tf.text = current;  // do whatever with your current number

current++;

if(current>end){

createjs.Ticker.removeEventListener('tick',f);

}

}

[janniklindgren]

Thank you sp much. When adding the code, the project won't run. However, if I remove the line "startTicker(10000,50000);  // edit this line to adjust for your start and stop numbers", the project runs, but counter doesn't work. Any thoughts? Thx

[kglad]

there's a typo.  that should be

startTickerF(10000,50000);

[janniklindgren]

That did the trick. Thank you!

[kglad]

you're welcome.

(p.s when using the adobe forums, please mark helpful/correct responses, if there are any.)

[Jonathan22259649im63]

Hello, I come to you after seeing this answer which was very useful to me.
I would like to know if it was possible to have an Ease on the counter animation?

Thanks in advance