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:

<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">
                  &nbsp;&nbsp;&nbsp;
                  <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";