Timer Counter dengan fungsi setInterval() dan clearInterval() dalam JavaScript

856

Pada kesempatan ini kita akan mencoba membuat sebuah timer counter dengan menggunakan javascript yang akan mencacah bilangan mulai dari 0 dan dilengkapi dengan tombol start, pause dan reset. Fungsi yang digunakan adalah setInterval dan clearInterval yang masing-masing digunakan untuk menge-set timer (start counter) dan meng-clear timer (pause counter). Fungsi setInterval dan clearInterval, secara umum ditulis:

setInterval(code,millisec,lang)

clearInterval(id_of_setinterval)

setInterval-clearInterval

Berikut contoh skrip yang akan mencacah bilangan dalam waktu 100 millisec:

//<js

<html>

<head>

<title>Timer Counter dengan fungsi setInterval() dan clearInterval() dalam JavaScript</title>

<script type=”text/javascript”>

var isRun =0;

//START

function startCounter(){

if(isRun==0){

var bilangan =document.getElementById(‘bilangan’);

bilangan.timer =setInterval(function(){counter()},100);

isRun =1;

}

}

//PAUSE

function pauseCounter(){

if(isRun==1){

var bilangan =document.getElementById(‘bilangan’);

bilangan.timer =clearInterval(bilangan.timer);

isRun =0;

}

}

//RESET

function resetCounter(){

var bilangan = parseInt(document.getElementById(‘bilangan’).innerHTML);

bilangan =0;

document.getElementById(‘bilangan’).innerHTML=bilangan;

}

//COUNTER

function counter(){

var bilangan = parseInt(document.getElementById(‘bilangan’).innerHTML);

bilangan ++;

document.getElementById(‘bilangan’).innerHTML=bilangan;

}

</script>

</head>

<body>

<body>

<div>

<p id=”bilangan”>0</p>

<p><input type=”button” value=”Start” onclick=”startCounter();” /> <input type=”button” value=”Pause” onclick=”pauseCounter();” /> <input type=”button” value=”Reset” onclick=”resetCounter();” /></p>

</div>

</body>

</html>

//&gt;js

Demo Skrip Klik disini.

Skrip lengkap dapat anda download di sini.

–Selamat Mencoba–

  • Gan, Boleh Request Source Code SetInterval dan SetTimeOut desain Soal ulangan, jika menjawab smw maka Intervalnya muncul kalimat Berhasil Bergerak, Jika tak selesai maka ada Msg Box keluar ” Anda Gagal”, Disampingnya ada TimeOut Countdown Timer nya ~! Thx

    Wow bgt ni kalau dijawab adminnya :3