PDA

View Full Version : Creating a countdown / clock / timer.



pierrel
19 Apr 2011, 7:06 AM
Hi! I'm new to Sencha Touch. I've stumbled on some problems while trying to make a simple first app that is supposed to countdown to a specified date and time. For now I just want to create a panel that is populated with the countdown text that automatically refreshes every second.

This is what I have so far:



var dateFuture = new Date(2013,3,16,0,0,0);

var GetCount = function(){
dateNow = new Date(); //grab current date
amount = dateFuture.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;

days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days
amount=amount%86400;

hours=Math.floor(amount/3600);//hours
amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +" day"+((days!=1)?"s":"")+"<br/>";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+"<br/>";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+"<br/>";}
out += secs +" seconds";

console.log("1");

return out;

};


TestApp.views.Countdown = Ext.extend(Ext.Panel, {

initComponent: function() {
Ext.apply(this, {
defaults: {
styleHtmlContent: true,
fullscreen: true
},
dockedItems: [{
xtype: "toolbar",
title: "Countdown"
}],
items: [{
html: '<h1>'+GetCount()+'</h1>',
}]
});
TestApp.views.Countdown.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('countdown', TestApp.views.Countdown);



Where and how do I start my timer? setInterval, setTimeout or some other timer method?
All help is appreciated.

Thanks!