Rabu, 07 Februari 2018

Timer dengan HTML

Timer ini menggunakan cara penghitungan mencari bilangan yang bernilai 0. Ex: jika detik bernilai 0 maka menit akan dikurangi 1 apabila tidak bernilai 0, jika menit bernilai 0 maka jam akan dikurangi 1 apabila jam tidak bernilai 0.


Kode Program :
<html>
<head>
<title>Timer dengan HTML</title>
</head>
<body>
Jam <input id="j" type="text" value="0"><br>
Menit <input id="m" type="text" value="5"><br>
Detik <input id="d" type="text" value="0"><br>
<button onclick="start()">Mulai</button>
<script>
var tm;
var j, m, d;
function start() {
// Mengambil nilai Jam, Menit dan Detik
j = parseInt(getID("j").value) || 0;
m = parseInt(getID("m").value) || 0;
d = parseInt(getID("d").value) || 0;
tm = setInterval(function() {
if(m == 0 && d == 0 && j != 0) {
j -= 1;
m = 60;
}
if(d == 0 && m != 0) {
m -= 1;
d = 60;
}
d--;
// Menampilkan nilai Jam, Menit dan Detik
getID("j").value = j;
getID("m").value = m;
getID("d").value = d;
// Menghentikan Interval jika waktu sudah habis
if(d == 0 && m == 0 && j == 0) {
clearInterval(tm);
}
}, 1000); }
function getID(n) {
// Mencari element berdasarkan ID
return document.getElementById(n);
}
</script>
</body>
</html>


EmoticonEmoticon