Count down 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 count down redirect using JavaScript.

Sometime during our front end development, we may wish to have a redirect that pauses for few seconds with a count down (threee, twoo, onee….), before sending the visitor off to 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.

Live Demo

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

Count down 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 seconds
  • 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.

 

 

There are no comments

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