Countdown Timer / Animate CC html5 Canvas

[charlieb69810333]

Hello,

Does anybody know how to make a dynamic countdown timer to a future date (Jan 1 2020) displaying by Days : Hours : Minutes : Seconds?

Any help would be much appreciated.

Thanks,

Charlie

[kdmemory]

Charlie

that's a question simple to ask but harder to answer. Because you are targetting HTML5 Canvas to have to get your head around the Javascript Date Object.

Start here: JavaScript Date Reference

And here is a manual to a countdown clock: Build a Countdown Timer in Just 18 Lines of JavaScript — SitePoint

Though it's all not specifically made for AnimateCC Canvas and createJS. You'll have to improvise.

Klaus

[charlieb69810333 · Accepted solution]

Hi Klaus,

Thank you for the great details. That got me going in the right direction.

I found this and works perfect:

var book_release_date = new Date(2019,6,1);  // for july, not june, 1st 2019 release date.

createjs.Ticker.addEventListener('tick',tickF.bind(this))

function tickF(e){

this.tf.text = formatF(book_release_date.getTime()-new Date().getTime());

}

function formatF(ms){

var days = Math.floor(ms/(1000*60*60*24));

ms -= days*1000*60*60*24;

var hours = Math.floor(ms/(1000*60*60));

ms -= hours*1000*60*60

var min = Math.floor(ms/(1000*60));

ms -= min*1000*60;

var sec = Math.floor(ms/1000);

return ' '+padF(days)+'  '+padF(hours)+'  '+padF(min)+'  '+padF(sec);

}

function padF(n){

var s=n.toString();

while(s.length<2){

s='0'+s;

}

return s;

}

[iftawana33998818]

i could not figure out how to have a veriable could you please provide the pictures of the dynamic text

so lame people could use it proper

[lahnny]

This works great! Thanks all. I don't need to display seconds in my timer, just days / hours / minutes - any ideas how I can hide the seconds display?