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.<\/p>\n\n\n\n
Sometime during our front-end development, we may wish to have a redirect that pauses for few seconds with a countdown (threee, twoo, onee….<\/strong><\/em>), before sending the visitor off to the destination. Something like starting a 100-meter race \ud83d\ude09<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Ok, let’s get to the programming side now. The complete code for a simple example is given below.<\/p>\n\n\n\n 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).<\/p>\n\n\n\n All we do here is,<\/p>\n\n\n\n That’s all folks \ud83d\ude42 I really appreciate it when you leave a comment below. Keep coding.<\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":" 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.<\/p>\n","protected":false},"author":1,"featured_media":1457,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3,1,10],"tags":[9,11,12,13],"class_list":{"0":"post-87","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-development","8":"category-general","9":"category-javascript","10":"tag-development","11":"tag-javascript","12":"tag-redirect","13":"tag-web","14":"entry"},"acf":[],"featured_image_src":"https:\/\/duckdev.com\/wp-content\/uploads\/2016\/03\/counter-600x400.jpg","featured_image_src_square":"https:\/\/duckdev.com\/wp-content\/uploads\/2016\/03\/counter-600x600.jpg","author_info":{"display_name":"Joel","author_link":"https:\/\/duckdev.com\/blog\/author\/joel\/"},"_links":{"self":[{"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":11,"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":1591,"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/posts\/87\/revisions\/1591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/media\/1457"}],"wp:attachment":[{"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duckdev.com\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Countdown redirect using JavaScript – Code Example<\/h2>\n\n\n\n
<!-- Modify according to your requirements -->\n<h3>\n Redirecting to duckdev.com after <span id=\"countdown\">10<\/span> seconds\n<\/h3>\n<!-- JavaScript part -->\n<script type=\"text\/javascript\">\n \n \/\/ Total seconds to wait\n var seconds = 10;\n \n function countdown() {\n seconds = seconds - 1;\n if (seconds < 0) {\n \/\/ Chnage your redirection link here\n window.location = \"https:\/\/duckdev.com\";\n } else {\n \/\/ Update remaining seconds\n document.getElementById(\"countdown\").innerHTML = seconds;\n \/\/ Count down using javascript\n window.setTimeout(\"countdown()\", 1000);\n }\n }\n \n \/\/ Run countdown function\n countdown();\n \n<\/script><\/pre>\n\n\n\nsetTimeout<\/code> function to reduce remaining seconds after each second<\/li>innerHTML<\/code> function.<\/li>window.location<\/code> method after remaining time cross 0.<\/li><\/ul>\n\n\n\n