Countdown redirect using JavaScript

Last day I had to touch my front end developer’s code in order to change the redirect scenario. So today I will share that piece code here with you. Let’s see how to make a countdown redirect using JavaScript.

Sometime during our front-end development, we may wish to have a redirect that pauses for few seconds with a countdown (threee, twoo, onee….), before sending the visitor off to the destination. Something like starting a 100-meter race 😉

The use-case is where you want to show an important message/text/banner to the visitor before proceeding the redirect. Adly and many other URL shortening services use this for revenue.

Ok, let’s get to the programming side now. The complete code for a simple example is given below.

Countdown redirect using JavaScript – Code Example

<!-- Modify according to your requirements -->
<h3>
  Redirecting to duckdev.com after <span id="countdown">10</span> seconds
</h3>
<!-- JavaScript part -->
<script type="text/javascript">
    
    // Total seconds to wait
    var seconds = 10;
    
    function countdown() {
        seconds = seconds - 1;
        if (seconds < 0) {
            // Chnage your redirection link here
            window.location = "https://duckdev.com";
        } else {
            // Update remaining seconds
            document.getElementById("countdown").innerHTML = seconds;
            // Count down using javascript
            window.setTimeout("countdown()", 1000);
        }
    }
    
    // Run countdown function
    countdown();
    
</script>

This HTML example is really basic, thinking that you can change it according to your requirement. But the JavaScript part is perfect (that’s what all you need).

All we do here is,

• Using pure JavaScript setTimeout function to reduce remaining seconds after each second
• Update to remaining time using JavaScript innerHTML function.
• Redirect user to the destination using JavaScript window.location method after remaining time cross 0.

That’s all folks 🙂 I really appreciate it when you leave a comment below. Keep coding.