Make a Button Download With Countdown Timer

Make a Button Download With Countdown Timer

Creating a Download Button With a Count Back  - There is a download button that utilizes social media buttons to open the download link. And the download button that we will discuss uses Auto Redirect with Timer to open internal or external download links.



DEMO

Save Javascript above the code </head> or </body> 

<script type="text/javascript">
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 10;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
        } else {
            teks_waktu.innerHTML = "" + waktu.toString() + " Detik";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>

Enter the code below in HTML mode , in your post.

 <button onclick="generate()" id="btn">Download</button>
<a id="download" href="link-download" style="display:none">Download Template</a>

Add CSS to remove the download link

 #link-download {
display: none
}

Good luck .... That's the Tutorial '' Make a Button Download With Countdown Timer '' Don't forget to Like, share and comment, huh ...