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

variableName = 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.

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(minutes) < 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.


Similar Articles