How To Set Countdown Download Timer When Click On Download

Countdown Download Timer Start When Click On Download Button

CSS Section:

<style> /*-- timer download button CSS --*/ .adscontainer{ padding: 1%; background: #00abff4f; border: 1px solid #d5d5d5; } .timerd2{ color: blue; cursor: pointer; } #mbtn, #rbtn { padding: 10px 20px; border: 0; border-radius: 5px; background: none; color: #000; float: right; text-transform: capitalize; font-weight: 700; font-size: 12px; font-family: 'Droid Sans'; } </style>

Javascript Section:

 
<script type='text/javascript'> //<![CDATA[ var downloadButton = document.getElementById("timerdwnl"); var counter = 3; var newElement = document.createElement("div"); newElement.innerHTML = "File is ready to download"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = +counter.toString() + " second."; } }, 1000); }; var clickbtn = document.getElementById("timrbtn"); clickbtn.onclick = startDownload; //]]> </script>


HTML Section:

<div class="adscontainer" style="margin: 1%;">

<div class="textCenter">

<div class="textTopic" align="center"><b>Your File Is Ready To Download</b></div>

<div>

<span class="textSize"><b>Click here 👇 to Download </b></span>

<button id="mbtn"><i aria-class="fa fa-cloud-download"></i>

<a href="#" id="timerdwnl">Download Now !</a>

<span id="timrbtn" class="timerd2">Click to Download</span>

</button>

</div>

</div>

<span>

<!--Banner Ad 400 * 60-->

Ad code here

</span>

</div>