Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How We can Display a Count Down Timer Control on our Web Form.

Author: DevASP
Download Source Code : 608_CountDownTimer.zip

This article is about how you can display a count down timer control on your web form. This is useful where you want to redirect the user to some other page if the time is completed. The major use of

Steps you will do.

 

Start visual studio and create a new web application. Open the HTML design of your web page and add the following JavaScript functions before closing the head tag.

 

 

 

<script>

    var mins

      var secs;

      function cd() {

      mins = 1 * m("1");

      secs = 0 + s(":01");

      redo();

      }

 

      function m(obj) {

            for(var i = 0; i < obj.length; i++) {

            if(obj.substring(i, i + 1) == ":")

            break;

      }

      return(obj.substring(0, i));

      }

 

      function s(obj) {

            for(var i = 0; i < obj.length; i++) {

                  if(obj.substring(i, i + 1) == ":")

                  break;

      }

      return(obj.substring(i + 1, obj.length));

      }

 

      function dis(mins,secs) {

            var disp;

            if(mins <= 9) {

            disp = " 0";

            } else {

                  disp = " ";

            }

            disp += mins + ":";

            if(secs <= 9) {

                  disp += "0" + secs;

            } else {

                  disp += secs;

            }

            return(disp);

      }

 

      function redo() {

            secs--;

            if(secs == -1) {

                  secs = 59;

                  mins--;

            }

            document.cd.disp.value = dis(mins,secs);

            if((mins == 0) && (secs == 0)) {

                  window.alert("Time is up. Press OK to continue.");

            } else {

                  cd = setTimeout("redo()",1000);

            }

      }

 

      function init() {

      cd();

      }

      window.onload = init;

 

 

</script> 

 

Now add the following style tag.

 

<style>

    #txt {

      border:none;

      font-family:verdana;

      font-size:16pt;

      font-weight:bold;

      border-right-color:#FFFFFF

      }

</style> 

 

Add the following HTML code to design the layout of your web page and call the above JavaScript functions.

 

 

<body MS_POSITIONING="GridLayout">

<form name="cd">

      <center>

 

      Dont forget to visit devasp.com<br>

      <a href="http://www.devasp.com">www.devasp.com</a><br><br>

 

      <div style="margin-left: 190px">         

<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp"></div>

 

      </center>

      </form>

</body> 

 

 

Run your application.

Article Comments
any server side codes?

Posted on 12/19/2006 9:27:12 AM by sreemanoj

I want to display countdown timer in webpage and using ASP.NET ,so please send me ASP.NET specific code

Posted on 12/26/2006 8:22:55 AM by Kulbir Sandhu

hi ,this is not running .showing error.
Access denied to 'c:\inetpub\wwwroot\CountDownTimer\'. Failed to start monitoring file changes.

Posted on 1/3/2007 10:11:20 AM by anil sahu

Access denied to 'c:\inetpub\wwwroot\CountDownTimer\'. Failed to start monitoring file changes.

Posted on 1/3/2007 10:11:42 AM by anil sahu

this is good.can u tell me how to make application start automatically when ever computer is turned on.

Posted on 1/30/2007 4:10:23 AM by nikhil gupta

working fantastic ..!!

Thansk

Posted on 2/1/2007 3:38:15 AM by Jyoti

hi..i want to start the timer on page load..
i want to do this in C# code ..
can anyone tell me how to work with timers in ASP.net c#

Posted on 3/6/2007 10:21:43 AM by joel

Hey, is there any way to add a start and stop button to this code? also a reset button?

thanks

Posted on 3/16/2007 9:07:16 AM by amneet

Hello,

I have tried it on my web page, but it only display a textbox with value 01:00, and this value just stay the same all the time, no change at all. Could someone please help me out?

thanks in advance

Posted on 3/26/2007 3:11:31 PM by Don

hi, this code is good,but i want this code to work dynamically,means there should be a variable through which we can run this code for any time,so plz send me that? and moreover i need asp.net specific code,so plz do me a favour in sending asp.net specific code..
thnx

Posted on 3/28/2007 4:47:17 AM by Sachin Chaudhary

To:anil sahu
Access denied to 'c:\inetpub\wwwroot\CountDownTimer\'. Failed to start monitoring file changes. this error is because you do not have the access right to that particular file, nothing to do woth the coding. Thus, please check the security setting for it.

Posted on 4/17/2007 3:47:19 AM by Albert

hi,
its working well,but only in seperate form how can i add this to my project

Posted on 8/27/2007 3:15:20 AM by rajesh

How to use BindingManagerBase class in ASP.NET Web application.Because BindingContext doesn't work.
or is there any alternative to implement the same

Posted on 12/8/2007 1:05:33 AM by vivek bhushan

i need some details about timer control that uses in Ajax, shall i know any C# code in asp.net page for web design

Posted on 9/19/2008 5:50:36 AM by vignesh

Hello thasts very short time cod e and not any good feature is there.

Posted on 2/13/2010 7:52:16 AM by Prashant

hello
we have used your code
we have encountered problems in continuing the timer in next page
i.e. the timer should work in multiple pages continuisly withuot reseting it
WAITING DESPERETLY FOR YOUR REPLY.

Posted on 8/7/2010 7:08:08 AM by prakriti saraswat

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How We can Blink the Text in our Web Application.

Disclaimer - Privacy
© 2002-2017 DevASP.net