Categories
PHP

Membuat JavaScript Timer Sederhana

Kali ini kami akan mencoba membahas bagaimana membuat Javascript timer sederhana menggunakan JavaScript. Script ini akan menghasilkan GUI penghitung waktu yang akan mulai berjalan ketika pengguna mengklik tombol Start. Script ini menggunakan fungsi setTimeout untuk memulai penghitung waktu yang menambah nilai secara terus menerus setelah tombol start diklik.

 

Langsung saja mari kita masuk kedalam pembahasan inti.

1. Buat file dengan nama index.html file ini sebagai form dimana javascript timer dijalankan.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://jasawebsite.ooo">Jasawebsite</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Timer Menggunakan JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-3"></div>
		<div class="col-md-6">
			<center><label style='font-size:45px;' id="result">00:00:00</label></center>
			<center><button  id="start" class="btn btn-primary" onClick="start()">Start</button> <button class="btn btn-success" onClick="reset()">Reset</button></center>
		</div>
	</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

2. Buat file dengan nama script.js file merupakan inti dari fungsi timer ini. Script ini akan memulai penghitung waktu ketika tombol start di klik.

var time = 0;
var running = 0;

function start(){
	if(running == 0){
		running = 1;
		timer();
		document.getElementById("start").innerHTML = "Pause";
		document.getElementById("start").setAttribute('class', 'btn btn-danger');
	}else{
		running = 0;
		document.getElementById("start").innerHTML = "Resume";
		document.getElementById("start").setAttribute('class', 'btn btn-warning');
	}
}

function reset(){
	running = 0;
	time = 0;
	document.getElementById("start").innerHTML = "Start";
	document.getElementById("result").innerHTML = "00:00:00";
	document.getElementById("start").setAttribute('class', 'btn btn-primary');
}

function timer(){
	if(running == 1){
		setTimeout(function(){
			time++;
			var mins = Math.floor(time/10/60)%60;
			var secs = Math.floor(time/10)%60;
			var ms = time%10;
			
			if(mins<10){
				mins = "0" + mins;
			}
			if(secs<10){
				secs = "0" + secs;
			}
			
			document.getElementById("result").innerHTML = mins+ ":" +secs+ ":" + "0" +ms;
			timer(); 
		},100);
	}
}

Kalian bisa mendownload dan mempelajarinya langsung dengan menekan link button dibawah ini.

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda.

Leave a Reply

Your email address will not be published. Required fields are marked *