Redirect to another Page after 5 Seconds Delay using JavaScript

Introduction

Open Visual Studio and create a new project and select a web template from the list and select ASP.NET Empty Web Application. Enter the name of your application and click on OK.

Right-click on the project and select Add -> Web Form and name it as Home.aspx.

Now paste the below JavaScript code in the head section of the Home.aspx page.

JavaScript Code

<script type="text/javascript">
function RedirectAfterDelayFn()
{
var seconds = 5;
var dvCountDown = document.getElementById("CountDown");
var lblCount = document.getElementById("CountDownLabel");
dvCountDown.style.display = "block";
lblCount.innerHTML = seconds;
setInterval(function ()
{
seconds--;
lblCount.innerHTML = seconds;
if (seconds == 0)
{
dvCountDown.style.display = "none";
window.location = "Redirected.aspx";
}
}, 1000);
}
</script>

Home.aspx Page Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="RedirectAfterDelay.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home</title>
<script type="text/javascript">
function RedirectAfterDelayFn() {
var seconds = 5;
var dvCountDown = document.getElementById("CountDown");
var lblCount = document.getElementById("CountDownLabel");
dvCountDown.style.display = "block";
lblCount.innerHTML = seconds;
setInterval(function () {
seconds--;
lblCount.innerHTML = seconds;
if (seconds == 0) {
dvCountDown.style.display = "none";
window.location = "Redirected.aspx";
}
}, 1000);
}
</script>
</head>
<body style="height: 180px">
<form id="form1" runat="server">
<div style="z-index: 1; left: 15px; top: 18px; position: absolute; height: 63px; width: 284px">
<input type="button" value="Redirect to another Page" onclick="RedirectAfterDelayFn()" style="border-width: thick; border-style: double; background-color: #FFFFFF; height: 40px; width: 215px;" />
<br />
<br />
<div id="CountDown" style="display: none">
You will be redirected after
<br />
<span id="CountDownLabel"></span> seconds.
</div>
</div>
</form>
</body>
</html>

Explanation

Our source code contains an HTML button and an HTML DIV tag which further contains HTML SPAN for displaying the countdown timer. When ever the button is clicked the RedirectAfterDelayFn JavaScript function is executed. Inside this function, the JavaScript setInterval function is initialized to execute every 1 second. When the function is executed the time decreases by 1 second and when the value of seconds becomes 0 the countdown timer is stopped and the page is redirected to another page.

Output

5 Comments

Join the conversation! Your thoughts help the community grow.

shaji shaikh4y ago
Thanks, Very easy and nice tutorial
Guest User8y ago
Gud blog......................................
Akki Gupta8y ago
Gud blogs.................
Nilesh Jadav11y ago
Nice work sir
Santhakumar Munuswamy11y ago
Good one