1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Digital Timer

Discussion in 'ASP.NET' started by naimish, Aug 31, 2009.

  1. naimish

    naimish New Member

    Joined:
    Jun 29, 2009
    Messages:
    1,046
    Likes Received:
    18
    Trophy Points:
    0
    Occupation:
    Software Engineer
    Location:
    On Earth

    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";
    
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,285
    Likes Received:
    364
    Trophy Points:
    83

Share This Page