Redirect to another Page after 5 Seconds Delay using JavaScript

Abhishek Arora
Sep 28, 2015
6.4k
0
0
Blog

Introduction

Open Visual Studio and create a new project and select 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 become 0 the countdown timer is stopped and the page is redirected to the another page.

Output