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);
Code: Select all
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.