Membuat Hitung Mundur (Count down) di Halaman Download dengan Javascript

Oke gan kali ini ane mau berbagi tutorial tentang javascript yaitu membuat Waktu/Hitungan mundur di halaman download dengan sistem count down. Biasanya fitur hitungan mundur (count down)  digunakan untuk mendelay halaman download supaya kita bisa menampilkan beberapa iklan kepada para  pengunjung, jika agan minat untuk memasang fitur ini di web atau wap agan silakan cermati tutorial dibawah ini.

Pertama-tama agan harus mempunyai link download (Alamat Url File Download) dan membuat halaman baru di web atau wap yang agan punya sebagai tempat menulis script, misalkan link download yang agan punya yaitu Http://file.co/download/lagu.mp3 maka codenya akan seperti dibawah ini.

<script type="text/javascript">
var waktu=15;
setInterval(function()
{ waktu--; if(waktu < 0)
{ window.location='Http://file.co/download/lagu.mp3'; }
else{ document.getElementById("waktu").innerHTML=waktu; }
},1000);
</script>

<span id="waktu">15</span>

Logika dari code di atas yaitu jika Hitungan mundur dari 15-1 habis maka halaman akan dialihkan ke page download secara otomatis, oke jika agan belum paham juga ane akan jelaskan bagian-bagian penting dari code diatas.

- var waktu=15;
Fungsi dari Variabel ini yaitu akan menyimpan angka 15 untuk dikurangkan secara otomatis oleh fungsi waktu--  sampai angka ke 1 (Hitung mundur).

- window.location='Http://file.co/download/lagu.mp3';
Fungsinya yaitu untuk mengalihkan halaman utama ke halaman download yang akan dituju yaitu Http://file.co/download/lagu.mp3 jika variabel waktu telah habis dalam perhitungan mundurnya.

- document.getElementById("waktu").innerHTML=waktu;
Fungsi ini bertujuan untuk mengakses isi html yang ada di id waktu supaya count down bisa ditampilkan.

- },1000);
Angka 1000 bisa kita ubah ke angka yang lebih kecil misal 500 untuk mengatur kecepatan hitungan mundur yang akan dilakukan.

- <span id="waktu">15</span>
Tag Html ini berfungsi untuk menampilkan angka count down.

Oke sekiranya itu saja yang bisa ane jelaskan semoga bisa bermanfaat bagi agan-agan semua yang sedang membaca tutorial ini.

Tweet