Countdown Timer Javascript

Posted on by

Hemh,,, mumpung lagi minat posting …
Kali ini aku mau berbagi pengetahuanku tentang javascript, bagi yang udah tau, mohon sarannya ya,,, 😉

Gini, script ini nantinya akan menampilkan Waktu yang berjalan mundur dan akan berhenti jika nilainya 0. Mulai ya …

<div id="show_time"></div>

<script>
var milidetik = 0; // awal mula mili detik dihitung 0 = 9, 1 = 8 ...
var detik = 30; // lama waktu timer
document.getElementById('show_time').value=detik;

function timerCountdown(){
   if (milidetik<=0){
       milidetik = 9;
       detik -= 1 ;
   }

   if (detik <=- 1){
       milidetik = 0;
       detik += 1;
   }else{
       milidetik -= 1;
       document.getElementById('show_time').value = detik+"."+milidetik;
       setTimeout("timerCountdown()",100);
   }
}

timerCountdown();
</script>

Nah, di bagian div nanti akan muncul countdown timernya,,, lumayan gampang kan … silahkan dicoba, semoga bermanfaat.

7 thoughts on “Countdown Timer Javascript”

  1. gan, klo misalny, var detik itu diambil secara dinamis gmn??
    misalny diambil dari database, mohon pencerahannya gan, soalnya gw juga baru didunia javascript..
    😀

    • gini, pertama tampung nilai waktu detik dalam sebuah variabel dalam php, misal saja
      $detik = 30; // 30 ini bisa diganti dengan nilai yang diambil dari database

      lalu, pada bagian javascriptnya,
      var detik = ;

      jadi deh bro, semoga bisa membantu,,, 🙂

  2. Ni modifikasinya —>

    [sourcecode language=”js”]var milidetik = 0;
    var detik = 10;
    document.getElementById("show_time").innerHTML=detik;

    function TimerNYA()
    {
    milidetik=milidetik-1;
    if(milidetik<0)
    {
    milidetik=9;
    detik=detik-1;
    }
    document.getElementById("show_time").innerHTML = detik+"."+milidetik;
    if (!(detik<=0 && milidetik<=0))
    {
    setTimeout(function(){ TimerNYA(); },100);
    }
    else
    {
    alert("Waktu telah habis !!!"); // DAPAT DIMODIF SESUAI KEBUTUHAN
    }
    }

    TimerNYA();[/sourcecode]

  4. kok susah-susah…
    cukup hilangkan kurung pada ‘else’…

    var milidetik = 0; // awal mula mili detik dihitung 0 = 9, 1 = 8 …
    var detik = 30; // lama waktu timer
    document.getElementById(‘show_time’).value=detik;

    function timerCountdown(){
    if (milidetik<=0){
    milidetik = 9;
    detik -= 1 ;
    }

    if (detik <=- 1){
    milidetik = 0;
    detik += 1;
    }else // hilangkan '{'
    milidetik -= 1;
    document.getElementById('show_time').value = detik+"."+milidetik;
    setTimeout("timerCountdown()",100);

    }

    timerCountdown();

Leave a Reply