Countdown timer on ASP.NET page

Question

Could you recommend me a way to place a coundown timer on ASP.NET page?

Now I use this code:

Default.aspx

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:Label ID="Label1" runat="server">60</asp:Label>
    <asp:Timer ID="Timer1" runat="server" Interval="1000" 
        ontick="Timer1_Tick">
    </asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>

Default.aspx.cs

protected void Timer1_Tick(object sender, EventArgs e)
{
    int seconds = int.Parse(Label1.Text);
    if (seconds > 0)
        Label1.Text = (seconds - 1).ToString();
    else
        Timer1.Enabled = false;
}

But it is traffic expensive. I would prefer pure client-side method. Is it possible in ASP.NET?

Answer 1

If you want a pure client side method, look for a javascript timer. There should be plenty of examples of this on the web.

Answer 2

You might add something like this in your .aspx page

<form name="counter"><input type="text" size="8" 
name="d2"></form> 

<script> 
<!-- 
// 
 var milisec=0 
 var seconds=30 
 document.counter.d2.value='30' 

function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
 } 
 else 
    milisec-=1 
    document.counter.d2.value=seconds+"."+milisec 
    setTimeout("display()",100) 
} 
display() 
--> 
</script>

Found here

Answer 3

OK, finally I ended with

<span id="timerLabel" runat="server"></span>

<script type="text/javascript">

    function countdown() 
    {
        seconds = document.getElementById("timerLabel").innerHTML;
        if (seconds > 0) 
        {
            document.getElementById("timerLabel").innerHTML = seconds - 1;
            setTimeout("countdown()", 1000);
        }
    }

    setTimeout("countdown()", 1000);

</script>

Really simple. Like old good plain HTML with JavaScript.

Answer 4

Does not work in FireFox. Label just displays its original value.

Answer 5

How to use the same code from Server side?? Like is there any way to control JAVASCRIPT timer?? OR when time is over.. can we make callback to any function in code-behind??

Answer 6

Hi All

If i implement the above countdown timer in the asp.net master page will that work fine.

This is very urget do get back to me ASAP.

Thanks in advance. Vyas [email protected]

Answer 7

TimeSpan time1 = new TimeSpan();

        time1 = (DateTime)ViewState["time"] - DateTime.Now;

        if (time1.TotalSeconds <= 0)
        {
            Label1.Text = Label2.Text = "TimeOut!";                
        }
        else
        {
            if (time1.TotalMinutes > 59)
            {
                Label1.Text = Label2.Text = string.Format("{0}:{1:D2}:{2:D2}",
                                                        time1.Hours,
                                                        time1.Minutes,
                                                        time1.Seconds);
            }
            else
            {
                Label1.Text = Label2.Text = string.Format("{0:D2}:{1:D2}",                                    
                                                        time1.Minutes,
                                                        time1.Seconds);
            }
        }

=================================================================================

I want to show the countdown in following two different formats as below:-

• min:seconds (Example- 8:29)
• hour:min:seconds (Example - 1:06:44)

Please suggest the solution in javascript.

Answer 8

use this javascript code---- var sec=0 ; var min=0; var hour=0; var t;

function display(){ if (sec<=0){ sec+=1; } if(sec==60) { sec=0; min+=1; } if(min==60){ hour+=1; min=0; }

if (min<=-1){ sec=0; min+=1; }

else sec+=1 ; document.getElementById("<%=TextBox1.ClientID%>").value=hour+":"+min+":"+sec; t=setTimeout("display()",1000); } window.onload=display;