Post
Ask Question

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 
  1. <script type="text/javascript">  
  2.     function RedirectAfterDelayFn()  
  3.     {  
  4.         var seconds = 5;  
  5.         var dvCountDown = document.getElementById("CountDown");  
  6.         var lblCount = document.getElementById("CountDownLabel");  
  7.         dvCountDown.style.display = "block";  
  8.         lblCount.innerHTML = seconds;  
  9.         setInterval(function ()  
  10.         {  
  11.             seconds--;  
  12.             lblCount.innerHTML = seconds;  
  13.             if (seconds == 0)  
  14.             {  
  15.                 dvCountDown.style.display = "none";  
  16.                 window.location = "Redirected.aspx";  
  17.             }  
  18.         }, 1000);  
  19.     }  
  20. </script>  
Home.aspx Page Code 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="RedirectAfterDelay.Home" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Home</title>  
  8.     <script type="text/javascript">  
  9.         function RedirectAfterDelayFn() {  
  10.             var seconds = 5;  
  11.             var dvCountDown = document.getElementById("CountDown");  
  12.             var lblCount = document.getElementById("CountDownLabel");  
  13.             dvCountDown.style.display = "block";  
  14.             lblCount.innerHTML = seconds;  
  15.             setInterval(function () {  
  16.                 seconds--;  
  17.                 lblCount.innerHTML = seconds;  
  18.                 if (seconds == 0) {  
  19.                     dvCountDown.style.display = "none";  
  20.                     window.location = "Redirected.aspx";  
  21.                 }  
  22.             }, 1000);  
  23.         }  
  24.     </script>  
  25. </head>  
  26. <body style="height: 180px">  
  27.     <form id="form1" runat="server">  
  28.         <div style="z-index: 1; left: 15px; top: 18px; position: absolute; height: 63px; width: 284px">  
  29.             <input type="button" value="Redirect to another Page" onclick="RedirectAfterDelayFn()" style="border-width: thick; border-style: double; background-color: #FFFFFF; height: 40px; width: 215px;" />  
  30.             <br />  
  31.             <br />  
  32.             <div id="CountDown" style="display: none">  
  33.                 You will be redirected after  
  34.                 <br />  
  35.                 <span id="CountDownLabel"></span> seconds.  
  36.             </div>  
  37.         </div>  
  38.     </form>  
  39. </body>  
  40. </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