Cara Membuat Timer Sederhana Dengan Javascript
Pada kesempatan kali ini saya akan membagikan tutorial tentang bagaimana Cara Membuat Timer Sederhana Dengan Javascript, pembahasan artikel ini saya akan menggunakan methode setTimeout yang berfungsi untuk set durasi dijalankan hanya satu kali saja dan sudah ditentukan berapa lamanya,
contoh : window.setTimeout akan di jalankan dengan menggunakan milisecond atau 1000 = 1detik, berikut adalah dari syntaxnya.Â
|
|
<strong>setTimeout(expression,timeout);</strong>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Timer Sederhana</title>
</head>
<body onload="start_timer();">
<div class="box">
<span id="time">
00:01:00
</span>
</div>
</body>
</html>
|
Langkah yang kedua saya akan menambahkan style CSS seperti berikut ini:
|
|
<style>
#time{
color:#e99;
font-size: 1000%;
font-weight: bold;
}
</style>
|
JIka sudah sekarang membuat beberapa variable untuk menampung setiap bagiannya serta membuat function yang akan digunakan seperti script dibawah ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<script type="text/javascript">
function start_timer(){
var timer = document.getElementById("time").innerHTML;
var arr = timer.split(":");
var hour = arr[0];
var min = arr[1];
var sec = arr[2];
if(sec == 0) {
if(min == 0) {
if(hour == 0) {
alert("Waktu Habis");
window.location.reload();
return;
}
hour--;
min = 60;
if(hour < 10) hour = "0" + hour;
}
min--;
if(min < 10) min = "0" + min;
sec = 59;
}
else sec--;
if (sec < 10) sec == "0" + sec;
document.getElementById("time").innerHTML = hour + ":" + min + ":" + sec;
setTimeout(start_timer, 1000);
}
</script>
|
Jika sudah coba sahabat jalankan dan lihat pada browser masing-masing maka tampilannya akan seperti berikut :
Set Timer selama 1 menit
Jika durasi yang sudah ditentukan selesai maka akan tampil seperti gambar berikut ini
Komentar
Posting Komentar