.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Melody Anderson
Eminent IT

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to show a Count Down Timer on ASP.Net page

Posted By:ASPEvil       Posted Date: June 28, 2014    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

How to show a Count Down Timer on ASP.Net page(.aspx) and operate it from the code behind file of the ASP.Net.


 In this article, I am going to show you how to create a Count Down Timer on ASP.Net pages whose value you can control from your code behind page too.

For this purpose, I done the following steps:-

1) I put the following code with .aspx page:- 

<asp:Panel ID="pnl_time_left_before_package_expiration" runat="server" 
                                                                      Visible="False" BackColor="#FF9999">
                                                                      You have left: 
                                                                      <asp:Label ID="lbl_time_left_before_package_expiration" runat="server" Text="Label" Font-Bold="True" Font-Size="Large" ForeColor="Red"></asp:Label> Seconds.                                                                      
                                                                      <script type="text/javascript">

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

                                                                              if (seconds <= 0) {


                                                                          setTimeout("countdown()", 1000);




The above code makes an ordinary asp.net panel and inside that asp.net panel, the main label control(where the timer values will be displayed) named as: "lbl_time_left_before_package_expiration" has been put.

Now, there is a JavaScript function, named as: "countdown()" is put under the above mentioned label control. This JavaScript function is the function which reduces the value of the above mentioned label control, so it becomes a count down timer. When the value of the above mentioned label control becomes zero(0) or less than zero, then this JavaScript function sends the user to a required url(I have put a sample url for demo purpose only, as:

You can put your own required page url to mention the Count Down Timer to take the user to that url of yours and then you can mention something on that page url or can do any other action, whatever action you like on that particular page. Or even, if do not want to redirect users to a particular page/url, instead you want to do any other action using javascript, on the same page(where your count down timer is), then you can replace the following code:-
which redirects users to other page/url.

Now, lets go to the code behind page and see how this timer can be accessible from the code behind.

If <your condition(s)> Then
                        pnl_time_left_before_package_expiration.Visible = True

                        pnl_time_left_before_package_expiration.Visible = True

End If
With above code, I simply make the visibility of the label control which is showing the count down timer value, True or False as per my specified coding conditions.

By the "If <your condition(s)> Then", with the above code, I wanted to mean that, you can make a if statement as per your requirement, with this particular line.


 Subscribe to Articles


Further Readings:

Author: vamsi         Company URL: http://www.dotnetspark.com
Posted Date: July 17, 2014

Good one...

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend