Membuat Script Countdown Timer Untuk Link Download

25 Jan 2016 22:49 • Post By

Membuat Script Countdown Timer Untuk Link Download


Hallo sahabat tutorialku.net pernahkah anda mengunduh file di situs-situs file sharing seperti 4shared, rapidshare, ziddu dan situs file sharing lainnya pastinya sering menjumpai countdown timer atau perhitungan waktu mundur sebelum muncul link download filenya.

Mungkin anda semua bertanya-tanya, mengapa perlu countdown tersebut?
Apa sih manfaatnya bagi situs tersebut?
Ya.. manfaatnya ada, yaitu supaya pengunjung mau melihat iklan-iklan yang ada di halaman tersebut sambil menunggu countdown timer nya selesai. Apalagi jika iklannya adalah iklan PPC tentunya hal ini akan memberikan revenue bagi pemilik situs tersebut.

Khusus untuk situs file sharing biasanya memanfaatkan pengunjung yang tidak sabaran menunggu countdown selesai untuk menawarkan layanan premium download.

Tentang countdown timer link download ini, bisa gak sih kita membuatnya sendiri? dan kalau bisa, kira-kira sulit nggak? Jawabannya adalah bisa, dan tidak sulit kok karena kita bisa membuatnya sendiri dengan Javascript dan Scriptnya sendiri mudah kalian dipahami untuk dikembangkan lagi.

Berikut ini adalah contoh halaman yang berisi countdown timer dalam file downloadnya:

1. Buat saja dengan download.html lalu isi script dibawah ini.

<html>
<head>
   <title>Count Down Download dengan JavaScript</title>
   <script type="text/javascript">
    var counter = 10;
    function countDown()
    {
        if(counter>=0)
        {
            document.getElementById("timer").innerHTML = counter;
        }
        else
        {
            download();
            return;
        }
        counter -= 1; 

        var counter2 = setTimeout("countDown()",1000);
        return;
    }
    function download()
    {
        document.getElementById("link").innerHTML = "<a href='http://namasitus/filedownload'>Download</a>";
    }
   </script>
</head>

<body onload="countDown();">
<h1>File Download</h1><br />
<h3>Link download akan muncul dalam <span id="timer"></span> detik.</h3> 

<span id="link"></span>

</body>
</html>
Penjelasan script di atas adalah sebagai berikut:

var counter = 10;
Digunakan untuk menset lamanya nilai awal countdown adalah 10. Jika Anda ingin mengubah nilai awal countdown, maka cukup mengubah nilainya saja.

function countDown()
{
    if(counter>0)
    {
       document.getElementById("timer").innerHTML = counter;
    }
    else
    {
       download();
       return;
    }
    counter -= 1; 

    var counter2 = setTimeout("countDown()",1000);
    return;
}
Function countDown() di atas digunakan untuk menampilkan nilai countdown nya. Jika nilai counter nya masih >= 0, maka nilai counter nya akan ditampilkan pada <span id="timer"></span> dengan menggunakan perintah

document.getElementById("timer").innerHTML = counter;
Namun jika tidak, maka akan menampilkan link downloadnya dengan memanggil function download(), di mana isi function download() nya adalah sbb:

function download()
{
   document.getElementById("link").innerHTML = "<a href='http://namasitus/namafile'>Download</a>";
}
Perintah..

document.getElementById("link").innerHTML = "<a href='http://namasitus/namafile'>Download</a>";
Digunakan untuk menampilkan link download di dalam bagian <span id="link"></span>.

counter -= 1;
Dalam function countDown() di atas? perintah tersebut digunakan untuk mengurangi satu demi satu nilai counter nya (decrement). Namanya saja countdown, pastinya counternya juga berkurang, terakhir apa kegunaan dari perintah tersebut.

var counter2 = setTimeout("countDown()",1000);
Perintah tersebut digunakan untuk memanggil kembali function countDown() setelah 1000 milisekon (1 detik). Jadi function countDown() ini senantiasa dipanggil setiap selang 1 detik, sehingga jarak pergantian nilai counternya adalah setiap 1 detik. Jika Anda ingin memperlambat pengurangan counternya, cukup menambah nilai setTimeout() nya dengan nilai yang lebih besar, misalnya 5000 jika ingin delay counternya 5 detik.

Bagaimana mudah bukan membuat script dan sekian terima kasih semoga bermanfaat..


Jangan lupa Subscribe ya !!

Membuat Script Countdown Timer Untuk Link Download | Tutorialku.Net | 4.5