How to Make Countdown Timer Before Displaying Download Link

In this post you will learn how to make a countdown timer before displaying the download link without using “id” attribute.
Simple JavaScript and HTML Countdown Timer

HTML Code for Countdown Timer

<button onclick="myDownloadFunction(this,'https://your-download')">Click Here to get Download link</button>

JavaScript Code for Countdown Timer

function myDownloadFunction(ele,url) {
var counter = 10;
var a = document.createElement('a');
var link = document.createTextNode("Download Now"); 
                a.href = url;  
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
ele.parentNode.replaceChild(newElement, ele);
id = setInterval(function() {
if(counter < 0) {
newElement.parentNode.replaceChild(a, newElement);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1500);



CodePen block for 10 second countdown timer using HTML and JavaScript

Leave a Reply

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