Post
Ask Question

CountDown Timer in JavaScript

Introduction

 
In this article you will see how to count time down, the countdown is a sequence of backward counting to indicate the time remaining before an event occurs.
 

setTimeout Method

 
The setTimeout method is a method of the global window object. It executes the given function or evaluates the given string specified as the second parameter after the given time. The setTimeout method has two parameters, the first parameter is a function and the second one is the delay time.
 
Syntex
  1. variable name=window.setTimeout(function(),delaytime) 
You can use the setTimeout method without using the Window object. In the following, countdown() is a function executed by the setTimeout function after the specified time. The second argument of the setTimeout method specifies how much time in milliseconds from now to wait, and then the first parameter specifies the function to be executed.
 
The first parameter of the setTimeout method should be a function.
  1. tim = setTimeout("countdown()", 1000); 
1000 miliseconds=1 second.
 
Use the following procedure to create a sample of evaluating a function periodically using JavaScript.
 
Step 1
 
Open Visual Studio then select "Create New Website" --> "ASP.NET Web Site".
 
CreateNewWebsite
 
Step 2
 
Now go to the Solution Explorer to the right side of the application and use the following procedure as in the following figure.
 
AddNewItem
 
Step 3
 
Add a new Web form in the empty web application as in the following figure.
 
AddNewWebForm
 
Write the following code in the Timer.aspx page:
 
Step 4
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Timer.aspx.cs" Inherits="Timer" %>  
  2.    
  3. <!DOCTYPE html>  
  4.    
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script lang="javascript" >  
  9.         var tim;  
  10.         var minutes = 0;  
  11.         var seconds = 6;  
  12.         var dt = new Date();  
  13.    
  14. /*function showcurrenttime() { 
  15. countdown(); 
  16. document.getElementById("starttime").innerHTML = "The Time Now is " + dt.getHours() + ":" + dt.getMinutes(); 
  17. }*/  
  18. function countdown() {  
  19. document.getElementById("mydiv").style.visibility = "hidden";  
  20. if (parseInt(seconds) > 0) {  
  21. seconds = parseInt(seconds) - 1;  
  22. document.getElementById("showtime").innerHTML = "Your Left Time  is :" + minutes + " Minutes ," + seconds + " Seconds";  
  23. tim = setTimeout("countdown()", 1000);  
  24. }  
  25. else {  
  26. if (parseInt(seconds) == 0) {  
  27. minutes = parseInt(minutes) - 1;  
  28. if (parseInt(seconds) == 0) {  
  29. clearTimeout(tim);  
  30. document.getElementById("showtime").style.visibility = "hidden";  
  31. document.getElementById("mydiv").style.visibility = "visible";  
  32. //location.href = "My.aspx";  
  33. }  
  34. else {  
  35. seconds = 60;  
  36. document.getElementById("showtime").innerHTML = "Your Left Time  is :" + minutes + " Minutes ," + seconds + " Seconds";  
  37. tim = setTimeout("countdown()", 1000);  
  38. }  
  39. }  
  40. }  
  41. }  
  42.  </script>  
  43. </head>  
  44.  <body onload="countdown()" >  
  45.     <form id="form1" runat="server">  
  46.     <div>  
  47.       <table width="100%" align="center">  
  48.         <tr>  
  49.           <td colspan="2">  
  50.             <h2>CountDown Start</h2>  
  51.           </td>  
  52.         </tr>  
  53.         <tr>  
  54.           <td>  
  55.             <!--<div id="starttime"></div><br />-->  
  56.             <div id="showtime"></div>  
  57.               <div id="mydiv">  
  58.                   <h3>Time Up!</h3>  
  59.               </div>  
  60.           </td>  
  61.         </tr>  
  62.         <tr>  
  63.           <td>  
  64.              <br/>  
  65.             </td>  
  66.          </tr>  
  67.       </table>  
  68.       <br />  
  69.    </div>  
  70.     </form>  
  71. </body>  
  72. </html> 
Output
 
Debug the application by pressing F5 to execute Web form. After debugging the application the output will be as in the following figure:
 
CountDownStart
 

Summary

 
In this article you saw how to evaluate a function using the setTimeout method.


Similar Articles