Forum | Appery.io

Hi, I want to create a simple stopwatch on my appery app. I have a button with Start on it that will go to stop when pressed and vice versa. I have a label with "00:00:00" and I want to continiually update this label when the start button is pressed and stop when the button is pressed again.

I have looked here
https://getsatisfaction.com/apperyio/...
but it didn't give me what I want.

Thanks in advance

Hi Aeneas,

Please use following solution to implement simple stopwatch:

1 Add to your "start" button "Click" event handler with following JS code:

pre

var getTwoSizeNumber = function(number){
return number 10 ? number : ("0" + number);
};

var UpdateLabel = function(date){
var newTimeText = getTwoSizeNumber(date.getHours()) + ":" + getTwoSizeNumber(date.getMinutes()) + ":" + getTwoSizeNumber(date.getSeconds());
Apperyio("timeLabel").text(newTimeText);
};

if(self.stopWatchInverval)
return;

//Note: you should replace "timeLabel" with your label component name.
var currentTime = Apperyio("timeLabel").text();

var currentTimeParts = currentTime.split(":");

var date = new Date();

date.setSeconds(currentTimeParts[2]);
date.setMinutes(currentTimeParts[1]);
date.setHours(currentTimeParts[0]);

var onInterval = function(){
date = new Date(date.getTime() + 1000);

 UpdateLabel(date); 

};
self.stopWatchInverval = setInterval(onInterval, 1000);

/pre

2 Add to your "stop" button "Click" event handler with following JS code:

pre

clearInterval(self.stopWatchInverval);

self.stopWatchInverval = undefined;

/pre

3 Add to your "clear" button "Click" event handler with following JS code:

pre

clearInterval(self.stopWatchInverval);

self.stopWatchInverval = undefined;

//Note: you should replace "timeLabel" with your label component name.
Apperyio("timeLabel").text("00:00:00");

/pre

You can try this solution here: http://appery.io/app/view/95800416-80...

Regards.

That looks really good thanks! How do I add a digital type font for the counter?

Hi Aeneas,

You can add any external font you need with CSS @font-face rule.

See details:

http://www.w3schools.com/cssref/css3_...

Regards.