Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
JavaScript

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 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 : 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 mililiseconds from now to wait, and then the first parameter specifus the function to be executed. The first parameter of the setTimeout method should be a function.

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Timer.aspx.cs" Inherits="Timer" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script lang="javascript" >

        var tim;

        var minutes = 0;

        var seconds = 6;

        var dt = new Date();

 

/*function showcurrenttime() {

countdown();

document.getElementById("starttime").innerHTML = "The Time Now is " + dt.getHours() + ":" + dt.getMinutes();

}*/

function countdown() {

document.getElementById("mydiv").style.visibility = "hidden";

if (parseInt(seconds) > 0) {

seconds = parseInt(seconds) - 1;

document.getElementById("showtime").innerHTML = "Your Left Time  is :" + minutes + " Minutes ," + seconds + " Seconds";

tim = setTimeout("countdown()", 1000);

}

else {

if (parseInt(seconds) == 0) {

minutes = parseInt(minutes) - 1;

if (parseInt(seconds) == 0) {

clearTimeout(tim);

document.getElementById("showtime").style.visibility = "hidden";

document.getElementById("mydiv").style.visibility = "visible";

//location.href = "My.aspx";

}

else {

seconds = 60;

document.getElementById("showtime").innerHTML = "Your Left Time  is :" + minutes + " Minutes ," + seconds + " Seconds";

tim = setTimeout("countdown()", 1000);

}

}

}

}

 </script>

</head>

 <body onload="countdown()" >

    <form id="form1" runat="server">

    <div>

      <table width="100%" align="center">

        <tr>

          <td colspan="2">

            <h2>CountDown Start</h2>

          </td>

        </tr>

        <tr>

          <td>

            <!--<div id="starttime"></div><br />-->

            <div id="showtime"></div>

              <div id="mydiv">

                  <h3>Time Up!</h3>

              </div>

          </td>

        </tr>

        <tr>

          <td>

             <br/>

            </td>

         </tr>

      </table>

      <br />

   </div>

    </form>

</body>

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

Up Next
    Ebook Download
    View all
    Learn
    View all