Skip to main content
C
charlieb69810333
Inspiring
December 17, 2018
Answered

Countdown Timer / Animate CC html5 Canvas

  • December 17, 2018
  • 2 replies
  • 6644 views

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

This topic has been closed for replies.
Correct answer charlieb69810333

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;

}

2 replies

lahnny
lahnny
Participant
October 9, 2019

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?

kdmemory
kdmemory
Inspiring
December 18, 2018

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

    C
    charlieb69810333AuthorCorrect answer
    Inspiring
    December 18, 2018

    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
    iftawana33998818
    Participant
    April 20, 2022

    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

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices