Highlighted

Countdown Timer / Animate CC html5 Canvas

Community Beginner ,
Dec 17, 2018

Copy link to clipboard

Copied

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

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;

}

TOPICS
Discussions

Views

2.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Countdown Timer / Animate CC html5 Canvas

Community Beginner ,
Dec 17, 2018

Copy link to clipboard

Copied

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

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;

}

TOPICS
Discussions

Views

2.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 17, 2018 0
Advocate ,
Dec 18, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 18, 2018 2
Community Beginner ,
Dec 18, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 18, 2018 0
lahnny LATEST
New Here ,
Oct 09, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2019 0