Wednesday, May 28, 2008

Timer control using Java Script

For one requirement, I was suppose to develop a timer which start when the user logs in and end after 3 hrs.
I was thinking of using Ajax but later I was able to make it with javascript

here is the code


Java script

var tick;
function updateStartDate(){
datestart = new Date();
var daystart = datestart.getDate();
var monthstart = datestart.getMonth()+1;
var yearstart = datestart.getFullYear();

if(daystart<=9) daystart="0"+daystart;
if(monthstart<=9) monthstart="0"+monthstart;
if(yearstart<=9) yearstart="0"+yearstart;

var hoursstart = datestart.getHours();
var minutesstart = datestart.getMinutes();
var secondsstart = datestart.getSeconds();

var ampm = "PM";
if(hoursstart >=12)
hoursstart = hoursstart-12;
else
ampm = "AM";
if(hoursstart<=9) hoursstart="0"+hoursstart;
if(minutesstart<=9) minutesstart="0"+minutesstart;
if(secondsstart<=9) secondsstart="0"+secondsstart;

var timestart = hoursstart+":"+minutesstart+":"+secondsstart;
//var datetimestart = daystart+"/"+monthstart+"/"+yearstart+" "+timestart+" "+ampm;
//var datetimestart = monthstart+"/"+daystart+"/"+yearstart+" "+timestart+" "+ampm;
var datetimestart =timestart+" "+ampm;
var StartTime = document.getElementById("txtStartTime");

StartTime.value = datetimestart;
tick=setInterval("updateEndDate()",1000);
}

var ut,h,m,s,time,date,d,month,y,txtEnd,EndHr,EndMin;
function updateEndDate()
{
ut=new Date();
d=ut.getDate();
month=ut.getMonth()+1;
y=ut.getFullYear();

if(d<=9) d="0"+d;
if(month<=9) month="0"+month;
if(y<=9) y="0"+y;

//date=d+"/"+month+"/"+y;
date=month+"/"+d+"/"+y;

h=ut.getHours();
m=ut.getMinutes();
s=ut.getSeconds();
var ampm = "PM";
if(h >=12)
h = h-12;
else
ampm = "AM";
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;

var timeend = h+":"+m+":"+s;
txtEnd = document.getElementById("txtEndTime");
//txtEnd.value = date+" "+timeend+" "+ampm;
txtEnd.value = timeend+" "+ampm;

}
function endTimer()
{
if(tick)
{
clearTimeout(tick);
tick = 0;
ut = null;
}
}


On Page Load

btnStartCall.Attributes.Add("onClick", "updateStartDate();return false;");
btnEndCall.Attributes.Add("onClick", "endTimer();return false;");


In the aspx add the corresponding button and textbox