Go4Expert

Go4Expert (http://www.go4expert.com/)
-   ASP.NET (http://www.go4expert.com/articles/asp-net-tutorials/)
-   -   Digital Timer (http://www.go4expert.com/articles/digital-timer-t19239/)

naimish 31Aug2009 08:43

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


shabbir 2Sep2009 18:55

Re: Digital Timer
 
Nomination for Article of the month - Aug 2009 Started.


All times are GMT +5.5. The time now is 00:56.