ASP.Net C# and Javascript Count Down Timer

ASP.Net, C# and Javascript Count Down Timer

ASP.Net Code

While displaying a count down timer on your Web Page you need to do following things :

On the web page you need to add 7 controls.

In that one is HTML Text box which displays the count down time

<input type="text" readonly ="true" size="8" id="counter" style="text-align:center; font-size:x-large; font-weight:bold; color:Red;" />

and rest of six are hidden fields in which three of them are HTML controls and other are ASP controls looks loke this

<input type="hidden" size="8" id="HidHours" value="<%=HidH.Value%>"/>

<input type="hidden" size="8" id="HidMinutes" value="<%=HidM.Value%>"/>

<input type="hidden" size="8" id="HidSeconds" value="<%=HidS.Value%>"/>

<asp:HiddenField ID="HidH" runat="server" Value="0" />

<asp:HiddenField ID="HidM" runat="server" Value="0" />

<asp:HiddenField ID="HidS" runat="server" Value="0" />

Now you need to write the main JavaScript part which displays this count down time

<script>

var hours=document.getElementById('HidHours').value;

var minutes=document.getElementById('HidMinutes').value;

var seconds=document.getElementById('HidSeconds').value;

function

display()

{

if (seconds<=0)

{

if ((hours==0)&&(minutes==0))

seconds=0;

else

{

seconds=60;

minutes-=1;

}

}

if (minutes<=0)

{

if ((hours<0)&&(minutes<0))>

{

hours = minutes = seconds = 0;

}

else

{

if ((hours==0)&&(minutes==0))

hours=minutes=0;

if ((hours>0)&&(minutes<0))>

{

minutes=59;

hours-=1;

}

}

}

if ((minutes<=-1)||(hours<=-1))

{

if (hours<=-1)

{

minutes=0;

hours+=1;

}

else

minutes-=1;

seconds=0;

minutes+=1;

}

else

if (seconds>0)

seconds-=1;

if (seconds <= 9 && seconds.toString().length < 2) seconds = "0"+seconds;

if (minutes <= 9 && minutes.toString().length < 2) minutes = "0"+minutes;

if (hours <= 9 && hours.toString().length < 2) hours = "0"+hours;

document.getElementById('counter').value=hours+":"+minutes+":"+seconds;

setTimeout("display()",1000);

}

display();

script>

The Main Concept Over Here is the Time from where the count down begins that time you need to pass into ASP Hidden fields whose id are HidH, HidM and HidS which defines hours, minutes and seconds respectively. Now these values are passed to HTML Hidden Controls whose id are HidHours, HidMinutes and HidSeconds since the values of ASP controls value's can not be passed directly to JavaScript code. We kept HTML controls as bridge between ASP controls Value's and JavaScript. and Now Javascript function display() is called recursively until hours, minutes and seconds becomes zero. Once it is zero you can redirect to any page you want

C# Code

TimeSpan ts;

HidH.Value = Convert.ToString(ts.Hours);

HidM.Value = Convert.ToString(ts.Minutes);

HidS.Value = Convert.ToString(ts.Seconds);

click here : http://groups.google.co.in/group/dotnethelp2008/web/count-down-timer-asp-net-javascript-and-c?hl=en&msg=ns