Tutorial :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?


Solution:1

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.


Solution:2

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


Solution:3

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


Solution:4

<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>  


Solution:5

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;    

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »