Diartikel ini kita akan membuat Stopwatch menggunakan Javascript. Stopwatch yang dibuat terdapat menit, detik dan milisecond sebanyak 3 digit dan terdapat satu tombol yang berfungsi untuk memulai, berhenti dan me-reset waktunya.
Pertama
Buat file html dan strukturnya dengan 3 label dan 1 button sebagai berikut:
<html>
<head>
<title>Yudha's World</title>
</head>
<body>
<b>Yudha's World - Stopwatch</b><br>
<label><time>00</time>:</label><label><time>00</time></label>:<label><time>00</time></label>
<br>
<input type="button" id="btnStopWatch" value="start" onclick="stopwatch()"/>
</body>
</html>
Kedua
Tulis javascriptnya sebagai berikut:
<script>
//variabel
var menit = document.getElementsByTagName('label')[0];
var detik = document.getElementsByTagName('label')[1];
var mili = document.getElementsByTagName('label')[2];
var timeBegan = null
, timeStopped = null
, stoppedDuration = 0
, started = null;
</script>
pada bagian ini kita baru mendeklarasikan variabel yang akan dipakai.
Ketiga
Kita buat fungsi clockRunning() setelah deklarasi variabel, kodenya sebagai berikut:
function clockRunning(){
var currentTime = new Date()
, timeElapsed = new Date(currentTime - timeBegan - stoppedDuration)
, min = timeElapsed.getUTCMinutes()
, sec = timeElapsed.getUTCSeconds()
, ms = timeElapsed.getUTCMilliseconds();
menit.innerHTML = min > 9 ? min : "0" + min+ ":";
detik.innerHTML = sec > 9 ? sec : "0" + sec;
mili.innerHTML = ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms;
}
fungsi clockRunning ini adalah fungsi utama pada stopwatch ini yang akan dipanggil oleh fungsi start(), pada fungsi clockRunning akan memberikan nilai dari menit, detik dan milisecond dari variabel timeElapsed dengan mengambil minutes, seconds dan miliseconds menggunakan getUTC.
timeElapsed berisi nilai dari object date yang dikurangi variabel object currentTime, timeBegan dan stoppedDuration.
Karena currentTime diisi dengan date object setiap kali clockRunning di eksekusi maka variabel currentTime berisi nilai dari date saat ini seperti "Tue Nov 20 2018 09:25:59 GMT +0700" setiap kali clockRunning dipanggil sesuai setIntervalnya.
timeBegan difungsi start() juga berisi date object sehingga currentTime yang tadi berisi 09:25:59 diambil timeBegan yang sewaktu start() di eksekusi bernilai 09:24:59 misalnya maka timeElapsed adalah pengurangan dari dua object date tersebut yang nanti akan dipecah atau diformat lagi sesuai jenisnya apakah minute,seconds dan miliseconds yang ditampilkan ke label.
Ke-empat
Selanjutnya setelah fungsi clockRunning, kita buat fungsi start(), stop() dan reset()
function start() {
if (timeBegan === null) {
timeBegan = new Date();
}
if (timeStopped !== null) {
stoppedDuration += (new Date() - timeStopped);
}
started = setInterval(clockRunning, 10);
}
function stop() {
timeStopped = new Date();
clearInterval(started);
}
function reset() {
clearInterval(started);
stoppedDuration = 0;
timeBegan = null;
timeStopped = null;
menit.innerHTML = "00"+":";
detik.innerHTML = "00";
mili.innerHTML = "00";
}
Terakhir
Kita buat fungsi bernama stopwatch() yang akan di-eksekusi ketika button atau tombol btnStopwatch di klik.
function stopwatch(){
var nama = document.getElementById("btnStopWatch").value;
if(nama == "start"){
document.getElementById("btnStopWatch").value = "stop";
start();
}else if(nama == "reset"){
document.getElementById("btnStopWatch").value = "start";
reset();
}else if(nama == "stop"){
document.getElementById("btnStopWatch").value = "reset";
stop();
}
}
kodenya sederhana, kita hanya melakukan pengecekkan terhadap value dari tombol btnStopwatch. Jika valuenya bernilai start, maka panggil fungsi start dan ubah value tombol btnStopwatch menjadi stop dan seterusnya.
Hasil Akhir
Ketika kita klik Start maka stopwatch berjalan dan teks pada tombol menjadi stop
Klik Stop, maka stopwatch berhenti dan teks pada tombol menjadi reset
Jika diklik reset maka menjadi tampilan semula dan teks pada tombol kembali menjadi start
Semoga Bermanfaat
Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.
.jpg)
