Cara Membuat Button Download With Countdown Timer

Selamat malam sobat, pada malam hari ini saya akan membagikan sebuah tutorial yaitu Cara membuat button download with countdown timer. Sebagaimana kita ketahui tutorial ini dimanfaatkan sebagai tombol untuk membuka link download. Oke langsung aja ya simak tutorialnya.

Demo

<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>

Simpan javascript diatas kode </head> atau </body>
Berikut data markup'nya

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

Terakhir tambahkan CSS untuk menghilangkan link download

#link-download {
display: none
}

Semoga Bermanfaat

^_^