Digital Timer
Introduction
There was a need of a timer which could count down from a partcular time.
Background
Say for example we need to count 01:12:30 then just give the input to the timer as 01:12:30 it will start counting down and even in the negative range too.
The code
Code: .NET, JavaScript
HTML Code:
<table cellpadding="0" cellspacing="0" border="1" align="center" width="400px" style="background-color: #eeeeee;
border-color: #ACA899;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" style="height: 25px; width: 180px;" border="0">
<tr>
<td style="padding-left: 3px;">
<asp:label id="lblRemainingTime" width="170" font-bold="true" font-size="Large" runat="server">Digital Timer </asp:label>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" width="370px">
<tr>
<td>
<table id="Table1" runat="server" style="margin-top: 0px;" cellpadding="0" cellspacing="0"
width="350px" border="0">
<tr>
<td width="160px" align="left">
<asp:textbox id="txtCurrItem" readonly="true" style="margin-bottom: 15px; margin-left: 15px;" runat="server"></asp:textbox>
</td>
<td width="100px" align="left">
<asp:button id="ibtnStop" width="70px" runat="server" text="Stop" onclientclick="javascript:return fnStop();" tooltip="Click to Stop." alternatetext="Click to Stop."></asp:button>
<asp:button id="ibtnResume" text="Resume" width="70px" runat="server" style="display: none;" onclientclick="javascript:return fnResume();" tooltip="Click to Resume." alternatetext="Click to Resume."> </asp:button>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
<input type="hidden" name="hdnTimer" id="hdnTimer" runat="server" />
///Now the code which does the functioning
<script language="javascript" type="text/javascript">
//variables set on timer
var currItemSec,currItemMin,currItemHr;
var objStop="N";
//If the Pause meeting btn is clicked then pause here also.
if(document.forms[0].hdnStopResume!=null)
if(document.forms[0].hdnStopResume.value=="Y")
{
objStop="Y";//debugger
var imgStop=document.getElementById('ctl00_AppPageHolder_ibtnStop');
if(imgStop==null)
imgStop=document.getElementById('ibtnStop');
var imgResume=document.getElementById('ctl00_AppPageHolder_ibtnResume');
if(imgResume==null)
imgResume=document.getElementById('ibtnResume');
imgStop.style.display='none';
imgResume.style.display='inline';
}
/***************************************************************************************************
' Function Name : clockTick
' Description : This is the function call.
' InputParameters : None
' Returned Values : None
'**************************************************************************************************/
clockTick();
/***************************************************************************************************
' Function Name : clockTick
' Description : This is the function called to fill in timers.
' InputParameters : None
' Returned Values : None
'**************************************************************************************************/
var hdnTimer = document.forms[0].hdnTimer;
var objItemValue = null;
if(hdnTimer!=null)
objItemValue = hdnTimer.value;
function clockTick(sender,args)
{//debugger
//ID's of the timers and combo
var txtCurrItem=document.getElementById('<%=txtCurrItem.ClientID%>');
//Get the Item Timer value from the Common functionality page.
if(objItemValue!=null)
{
var objSplit=objItemValue.split(':');
currItemHr=parseInt(objSplit[0]);
currItemMin=parseInt(objSplit[1]);
currItemSec=parseInt(objSplit[2]);
//if exactly 1:00:00 is passed
if(currItemHr>0 && currItemMin==0 && currItemSec==0)
{
currItemHr=currItemHr-1;
currItemMin=60;
}
objItemValue = null;
}
//debugger
//If the Current time is not null
if (txtCurrItem != null)
{
//Check if the timer value is a number
if (!isNaN(currItemHr) && !isNaN(currItemMin) && !isNaN(currItemSec))
{
//if timer is stopped then donot go inside, just move round and round.
if (objStop == "N")
{
//Logic of the timer:
//Initially the seconds time will be 60,and decrement its value by 1 until its value is 0.
//when its value is 0, then decrement the minute by 1 and reset seconds to 60.
//This process continues until the minutes(on decrement) value becomes 0, when this happens decrement hour by 1
//For negative up Count,use same concept instead while showing the output use (60-seconds),whta this effectively does is
//it shows up count.For example normal decrement goes like 60,59,58,57,....0, but here it becomes 0(60-60),1(60-59),2(60-58),.....
//For the Yellow At if the sec,min and hr are all 0 then it means show textbox color as red(as it is negative)
//If the Hour is equal to 0 (as yellow at is in minutes) and less than yellow At value show textbox color as yellow
//and if neither of the above show green color
//
//decrement seconds by 1, if seconds is not 0.
if (currItemHr >= 0) {
if (currItemSec == 0)
currItemSec = 0
else
currItemSec = currItemSec - 1;
// if all three sec,min and hr is 0 then decrement sec by 1.
if (currItemHr == 0 && currItemMin == 0 && currItemSec == 0)
currItemSec = currItemSec - 1;
//if seconds is 0 then decrement min by 1 , reset sec to 60.
if (currItemSec == 0) {
currItemSec = 60;
if (currItemMin != 0)
currItemMin = currItemMin - 1;
}
//Get the minutes and set the color for the text box.
//var objMinutes=objYellowAt.childNodes[0].value.replace(" minutes","");
//debugger;
//if min is 0 and Hour is not 0.
if (currItemMin == 0 && currItemHr != 0) {
currItemHr = currItemHr - 1;
currItemMin = 60;
}
//for negative count, if sec is -60 then decrement min by 1 and reset sec to 60.
if (currItemSec == -60) {
currItemMin = currItemMin - 1;
currItemSec = 60;
}
//for negative count, if min is -60 then decrement hour by 1 and set min to -0.
if (currItemMin == -60) {
currItemHr = currItemHr - 1;
currItemMin = 0;
}
//for negative counting, if min is in negative then count the seconds up(60-seconds).
if (parseInt(currItemMin) < 0 || parseInt(currItemHr) < 0)
txtCurrItem.value = currItemHr + ' Hr ' + currItemMin + ' Min ' + parseInt(60 - currItemSec) + ' sec ';
//if minutes is 60 it means that it is 1 hr,to show 1:00:00
else if (parseInt(currItemMin) == 60)
txtCurrItem.value = parseInt(currItemHr + 1) + ' Hr ' + parseInt(currItemMin - 60) + ' Min ' + currItemSec + ' sec ';
else
txtCurrItem.value = currItemHr + ' Hr ' + currItemMin + ' Min ' + currItemSec + ' sec ';
txtCurrItem.blur();
}
//This is for negative time
else if (currItemHr < 0)
{
if (currItemSec == 60)
currItemSec = 0;
//increment sec
currItemSec = currItemSec + 1;
//if sec is 60 then increment minutes
if (currItemSec == 60) {
currItemSec = 0;
currItemMin = currItemMin + 1;
}
if (currItemMin == 60) {
currItemMin = 0;
currItemHr = currItemHr - 1;
}
txtCurrItem.value = currItemHr + ' Hr ' + currItemMin + ' Min ' + currItemSec + ' sec ';
var objRad = document.getElementById('<%=txtCurrItem.ClientID %>');
objRad.style.backgroundColor = 'Red';
}
else
{
var objRad = document.getElementById('<%=txtCurrItem.ClientID %>');
//if negative minutes then deduct from 60 , else normal count down
if (parseInt(currItemMin) < 0 || parseInt(currItemHr) < 0)
txtCurrItem.value = currItemHr + ' Hr ' + currItemMin + ' Min ' + parseInt(60 - currItemSec) + ' sec ';
//if minutes is 60 it means that it is 1 hr,to show 1:00:00
else if (parseInt(currItemMin) == 60)
txtCurrItem.value = parseInt(currItemHr + 1) + ' Hr ' + parseInt(currItemMin - 60) + ' Min ' + currItemSec + ' sec ';
else
txtCurrItem.value = currItemHr + ' Hr ' + currItemMin + ' Min ' + currItemSec + ' sec ';
//var objMinutes=objYellowAt.childNodes[0].value.replace(" minutes","");
}
}
}
}
//}
//recursive call each time.
setTimeout("clockTick()", 1000);
}
//function call
/***************************************************************************************************
' Function Name : fnMoveDownwards
' Description : This function is used to stop the timer
' InputParameters : None
' Returned Values : None
'**************************************************************************************************/
function fnStop()
{
objStop="Y";
//self.opener.document.getElementById('hdnStop').value="Y";
var imgStop=document.getElementById('ctl00_AppPageHolder_ibtnStop');
if(imgStop==null)
imgStop=document.getElementById('ibtnStop');
var imgResume=document.getElementById('ctl00_AppPageHolder_ibtnResume');
if(imgResume==null)
imgResume=document.getElementById('ibtnResume');
imgStop.style.display='none';
imgResume.style.display='inline';
return false;
}
/***************************************************************************************************
' Function Name : fnMoveDownwards
' Description : This function is used to resume the timer
' InputParameters : None
' Returned Values : None
'**************************************************************************************************/
function fnResume()
{
objStop="N";
//Resume the meeting timer on the parent page(common functionality)
var imgStop=document.getElementById('ctl00_AppPageHolder_ibtnStop');
if(imgStop==null)
imgStop=document.getElementById('ibtnStop');
var imgResume=document.getElementById('ctl00_AppPageHolder_ibtnResume');
if(imgResume==null)
imgResume=document.getElementById('ibtnResume');
imgStop.style.display='inline';
imgResume.style.display='none';
return false;
}
</script>
Now in the aspx.cs file just set the value for the hidden variable and it will start counting
Code:
//to set the initial value for the timer,set the below hidden variable in the form of HH:MM:SS
hdnTimer.Value = "0:0:5";
|
