Membuat Tombol Download Dengan Hitungan Mundur

Ada Tombol download yang memanfaatkan  tombol sosial media untuk membuka link downloadnya. Dan tombol download yang akan kita bahas memanfaatkan Auto Redirect dengan Timer untuk membuka link download internal atau external.

DEMO

Simpan Javascript diatas kode </head> atau </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>

Masukan kode dibawah ini dalam mode HTML, pada postingan sobat.

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

Tambahkan CSS untuk menghilangkan link download

#link-download {
display: none
}

Selamat Mencoba....

Tweet

Artikel keren lainnya: