Wednesday 19 February 2014

Timer in Javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="_head" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Practice</title>
     <!-- For Timer-->
    <script language="javascript" type="text/javascript">
            var gtime=0;
            var gintervalid=-1;
            function shuffle()
            {
                clearInterval(gintervalid);
                tickTime();
                gintervalid = setInterval(tickTime,1000);
            }

function showStatus()
    {
        var fTime;
        fTime=formatTime(gtime)
         document.getElementById('spanTime').innerHTML=fTime;
         document.getElementById('txtTime').value=fTime;
       
    }
function tickTime()
    {   
      showStatus();
      gtime++;
    }

function stopGame()
{
  if (gintervalid==-1) return;
  clearInterval(gintervalid); 
  gintervalid=-1;
}
function pad(number, length) {
    var str = '' + number;
    while (str.length < length) {str = '0' + str;}
    return str;
}
function formatTime(time) {
    var hr = parseInt(time / 3600),
        min = parseInt(time / 60)-(hr*60),
        sec = parseInt(time) - (min * 60)-(hr*3600);

    return (hr > 0 ? pad(hr,2):"00")+":"+(min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2);
}
</script>
   
</head>
<body>
    <form id="frmMain" autocomplete="off" runat="server">
    <!--main content area start-->

        <div class="menuholder">

            <table width="100%" cellpadding="0px" cellspacing="0" border="0" id="game_table">

                <tr>
                    <td align="center" style="border: none;" colspan="2">
                        <asp:Label ID="lblGameTime" runat="server" Style="display: none" CssClass="timer"></asp:Label>
                        <asp:Label ID="spanTime" runat="server" Style="display: none" CssClass="timer"></asp:Label>
                        <asp:HiddenField ID="txtTime" runat="server" />
                    </td>
                </tr>           
                <tr>
                    <td class="btn" colspan="2" align="left">
                        <asp:Button ID="btnPlay" runat="server" Text="Play" />
                        <div id="divTimer" runat="server"></div>
                        <asp:Button ID="btnSave" runat="server" Text="Save" Style="display: none"/>
                    </td>
                </tr>

            </table>

            <!--end inside content-->
        </div>
    <!--main content area end-->
  
    </form>
</body>
</html>

.CS
----
#Region "play"
    Protected Sub btnPlay_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnPlay.Click
        Me.spanTime.Attributes.Add("style", "display:")
        Me.btnPlay.Attributes.Add("style", "display:none")
        Me.btnSave.Attributes.Add("style", "display:")
        Me.divTimer.InnerHtml = "<script>shuffle();</script>"
    End Sub
#End Region

#Region "Save"
    Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
        Me.btnSave.Enabled = False
        Me.lblGameTime.Text = "Total Time " & txtTime.Value
        Me.lblGameTime.Attributes.Add("style", "display:")
        Me.spanTime.Attributes.Add("style", "display:none")
        Me.btnSave.Attributes.Add("style", "display:")
    End Sub
#End Region