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?

It's funny that you ask that ... I just implemented a solution similar to yours a few days ago. It had to get done and this was the quick and dirty. I'll be interested to see how to do this client-side. — mattruma
– mattruma, Commented Sep 20, 2008 at 19:26

Alexander Prokofyev · Accepted Answer · 2009-02-26 05:24:59Z

6

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.

edited Feb 26, 2009 at 5:24

answered Sep 21, 2008 at 13:18

Alexander Prokofyev

34.6k33 gold badges101 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sharique Over a year ago

Timer value get reset after postback.

Alexander Prokofyev Over a year ago

I did also server check to avoid Javascript hacks or form reload.

jcolebrand · Accepted Answer · 2011-03-16 23:53:28Z

4

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);
    }
}

edited Mar 16, 2011 at 23:53

jcolebrand

16k12 gold badges78 silver badges123 bronze badges

answered Feb 16, 2011 at 8:25

user554151

411 bronze badge

Comments

Sklivvz · Accepted Answer · 2008-09-20 19:31:40Z

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

answered Sep 20, 2008 at 19:31

Sklivvz

31.3k24 gold badges123 silver badges174 bronze badges

Comments

Casselj · Accepted Answer · 2011-11-16 14:25:00Z

2

<script type="text/javascript">
    var sec = 10;
    var min = 0
    var hour = 0;
    var t;

    function display() {
        sec -= 1
        if ((sec == 0) && (min == 0) && (hour == 0)) {
            //if a popup window is used:
            setTimeout("self.close()", 1000);
            return;
         }
        if (sec < 0) {
            sec = 59;
            min -= 1;
        }
        if (min < 0) {
            min = 59;
            hour -= 1;
        }
       else
        document.getElementById("<%=TextBox1.ClientID%>").value = hour + ":" + min + ":" + sec;
        t = setTimeout("display()", 1000);
    }
    window.onload = display; 
</script>

answered Nov 16, 2011 at 14:25

Casselj

211 bronze badge

Comments

jcolebrand · Accepted Answer · 2011-03-16 23:53:10Z

1

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;

edited Mar 16, 2011 at 23:53

jcolebrand

16k12 gold badges78 silver badges123 bronze badges

answered Aug 16, 2010 at 10:23

rakesh

111 bronze badge

Collectives™ on Stack Overflow

Countdown timer on ASP.NET page

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related