Button Download With Countdown Timer

Sebelumnya kita sudah pernah membahas tentang Cara Membuat Konten Sosial Locker yg memanfaatkan tombol social network untuk membuka link downloadnya. Dimana kita sekarang memanfaatkan Auto Redirect dengan Timer untuk membuka link download internal atau external.

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

Terkahir tambahkan CSS untuk menghilangkan link download

#link-download {
display: none
}

Selamat mencoba !!!
Jangan lupa untuk memberi vote di bawah ini, terima kasih...

Share on Facebook

Share on Twitter

Share on Google+