CountDown Timer in JavaScript

Pankaj Lohani
10y
9.7k
0
0

Article

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>

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>

<div>

<tr>

<h2>CountDown Start</h2>

</td>

</tr>

<tr>

<td>

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

KOTLIN FOR BEGINNERS

Read by 0 people

Download Now!

Learn

View all