Countdown Timer with canvas

[arash6657]

Hello. i wanted to make a countdown timer in Adobe animate Canvas with minutes and seconds (it takes for example 45 minutes) .when the time will over , my movieclip disapear

(this.mc.visible = false)!
I read all forums but I couldn't succeed .can any one write this shortly plsssss???

[Nicktendo28]

Try using this ticker class to create a countdown timer, EaselJS v0.8.2 API Documentation : Ticker​

This should do the trick.

[arash6657]

Thanks but as i am new with canvas can you please write the timer code for 45 minutes???

[JoãoCésar · Accepted solution]

Hi.

Here is my suggestion.

Complete ignore the code for the buttons if you wish. You can just set the initialMinutes variable to 45 and then only call the startTimer function.

Preview:

JavaScript code:

var that = this;
this.initialMinutes = 0.2; // set here to 45
this.totalTime = 0;
this.currentTime = 0;
this.interval = 0;
this.start = function()
{
     that.startTimer(that.updateCallBack, that.endCallback);
     that.startButton.on("click", function(e){that.startTimer(that.updateCallBack, that.endCallback)}, this);
     that.stopButton.on("click", function(e){that.stopTimer(that.stopCallback)}, this);
     that.pauseButton.on("click", function(e){that.pauseTimer(that.pauseCallback)}, this);
     that.resumeButton.on("click", function(e){that.resumeTimer(that.resumeCallback, that.updateCallBack, that.endCallback)}, this);
};
this.updateCallBack = function()
{
     that.setText();
};
this.endCallback = function()
{
     that.mc.visible = false
};
this.stopCallback = function()
{
     console.log("stopped");
};
this.pauseCallback = function()
{
     console.log("paused");
};
this.resumeCallback = function()
{
     console.log("resumed");
};
this.startTimer = function(updateCallback, endCallback)
{
     clearInterval(that.interval);
     that.totalTime = that.minutesToMilliseconds(that.initialMinutes);
     that.currentTime = that.totalTime;
     that.setText();
     that.setTime(updateCallback, endCallback);
};
this.stopTimer = function(callback)
{
     clearInterval(that.interval);
     that.totalTime = 0;
     that.currentTime = 0;
     that.setText();
     callback();
};
this.pauseTimer = function(callback)
{
     clearInterval(that.interval);
     that.totalTime = that.currentTime;
     callback();
};
this.resumeTimer = function(resumeCallback, updateCallback, endCallback)
{
     if (that.currentTime == 0)
          return;
     clearInterval(that.interval);
     that.totalTime = that.currentTime;
     that.setTime(updateCallback, endCallback);
     resumeCallback();
};
this.setTime = function(updateCallback, endCallback)
{
     that.interval = setInterval(function()
     {
          that.currentTime -= 1000;
          updateCallback();
          if (that.currentTime == 0)
          {
               clearInterval(that.interval);
               endCallback();
          }
     }, 1000);
};
this.setText = function()
{
     var time = that.timeCode(that.currentTime);
     that.timeText.text = time.minutes + ":" + time.seconds;
};
this.minutesToMilliseconds = function(minutes)
{
     return 1000 * 60 * minutes;
};
this.timeCode = function(milliseconds)
{
     var seconds = Math.floor((milliseconds / 1000) % 60);
     var strSeconds = (seconds < 10) ? ("0" + String(seconds)) : String(seconds);
     var minutes = Math.round(Math.floor((milliseconds / 1000) / 60));
     var strMinutes = (minutes < 10) ? ("0" + String(minutes)) : String(minutes);
     return {seconds: strSeconds, minutes: strMinutes};
};
this.start();

FLA download:

animate_cc_html5_timer_02.zip - Google Drive

Please let me know if there is some concept you don't understand.

I hope this helps.

Regards,

JC

[arash6657]

woww.thanks alot.its exactly what i need

[JoãoCésar]

You're welcome!

[Nurhamida25024381d3rg]

Finally after getting stuck for a week with a little modification I can create a stopwatch with this script. Thank you so much!

[JoãoCésar]

You're welcome!

[Nurhamida25024381d3rg]

Hi, it's me again, I have a question, could we make the timer in seconds only? thanks in advance.

[Nurhamida25024381d3rg]

It is solved.

[Patrick25532199tmcv]

Thank you for this lovely countdown timer.

I tried to use this countdown timer codes for making online tests for our students.
It was working fine but the problem was when the web browser showing the countdown timer was deactivated (when the web browser was not the active window for any reason/s), the web browser PAUSED the javascript from running while the web browser wasn't actively selected in order to save energy, and as a result, some countdown timers on student's laptop finished/stopped later than other students.
Is there a way to overcome this problem by making this lovely count down timer use the web server's clock instead of user's clock (system time in student's computer)?

[charlieb69810333]

Hi.. Thanks for the code for the timer. That works great! Any idea on how to expand this to Days : Hours : Minutes : Seconds? Doing a countdown timer for about a 380 days. Amny help would be super appreciated.. Thanks!

[ward0101]

This is working great for me.  Thanks so much.

I am wondering how I might add a gotoAndPlay(1); or some other command when the timer times out?

Again, thanks!

[JoãoCésar]

Hi.

I'm glad this is working for you.

When the time is out, the endCallback is called. So you only have to place your code in it.

this.endCallback = function()
{
    // your code
};

Regards,

JC

[ward0101]

Hello!

Thanks for the help on this.

I added this:

//restart

this.endCallback = function()
{
	that.mc.visible = false
	this.gotoAndStop(1);
};

Keeping your code.  I also tried putting it in it's own endCallback function (leaving and removing your endCallback function).  I can't get it to go back to the first frame and stop.

I did a lot of Javascript in the 90's but I'm afraid I've lost it all.  I mostly have no idea what I'm doing.  Sorry.

Thank you.

[JoãoCésar]

Hi.

Please try this.gotoAndStop(0); and tell us if it works.

[ward0101]

Still no return to the first frame (a button that says "Go").

var that = this;

this.initialMinutes = .1; // set here to 45
this.totalTime = 0;
this.currentTime = 0;
this.interval = 0;

this.start = function()
{	
	that.startTimer(that.updateCallBack, that.endCallback);

	that.startButton.on("click", function(e){that.startTimer(that.updateCallBack, that.endCallback)}, this);
	that.stopButton.on("click", function(e){that.stopTimer(that.stopCallback)}, this);
	that.pauseButton.on("click", function(e){that.pauseTimer(that.pauseCallback)}, this);
	that.resumeButton.on("click", function(e){that.resumeTimer(that.resumeCallback, that.updateCallBack, that.endCallback)}, this);
};

this.updateCallBack = function()
{
	that.setText();
};


//restart

this.endCallback = function()
{
	that.mc.visible = false
	this.gotoAndStop(0);
};



this.stopCallback = function()
{
	console.log("stopped");
};

this.pauseCallback = function()
{
	console.log("paused");
};

this.resumeCallback = function()
{
	console.log("resumed");
};

this.startTimer = function(updateCallback, endCallback)
{
	clearInterval(that.interval);
	that.totalTime = that.minutesToMilliseconds(that.initialMinutes);
	that.currentTime = that.totalTime;	
	that.setText();
	that.setTime(updateCallback, endCallback);

};

this.stopTimer = function(callback)
{
	clearInterval(that.interval);
	that.totalTime = 0;
	that.currentTime = 0;	
	that.setText();
	callback();
	
};

this.pauseTimer = function(callback)
{
	clearInterval(that.interval);
	that.totalTime = that.currentTime;
	callback();
};

this.resumeTimer = function(resumeCallback, updateCallback, endCallback)
{
	if (that.currentTime == 0)
		return;
	
	clearInterval(that.interval);
	that.totalTime = that.currentTime;
	that.setTime(updateCallback, endCallback);
	resumeCallback();
};

this.setTime = function(updateCallback, endCallback)
{	
	that.interval = setInterval(function()
	{
		that.currentTime -= 1000;
		updateCallback();
		
		if (that.currentTime == 0)
		{			
			clearInterval(that.interval);
			endCallback();
		}			
		
	}, 1000);
};

this.setText = function()
{
	var time = that.timeCode(that.currentTime);
	that.timeText.text = time.minutes + ":" + time.seconds;
};

this.minutesToMilliseconds = function(minutes)
{
	return 1000 * 60 * minutes;
};

this.timeCode = function(milliseconds)
{
	var seconds = Math.floor((milliseconds / 1000) % 60);
	var strSeconds = (seconds < 10) ? ("0" + String(seconds)) : String(seconds);
	var minutes = Math.round(Math.floor((milliseconds / 1000) / 60));
	var strMinutes = (minutes < 10) ? ("0" + String(minutes)) : String(minutes);
	
	return {seconds: strSeconds, minutes: strMinutes};
};


this.start();