Posted on

Countdown redirect using JavaScript

Countdown

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

 

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.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *