Countdown Timer Javascript


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. 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();

  2. Ni modifikasinya —>

    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();
  3. 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,,,🙂

Mari Berdiskusi Bersama

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s