How to Make Countdown Timer Before Displaying Download Link

by

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

<script>
function myDownloadFunction(ele,url) {
var counter = 10;
var a = document.createElement('a');
var link = document.createTextNode("Download Now"); 
                a.appendChild(link); 
                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() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(a, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1500);

};

</script>

CodePen block for 10 second countdown timer using HTML and JavaScript

Leave a Comment