Tutorial ini akan mejelaskan demo tentang membuat timer waktu mundur dengan menggunakan JavaScript. Langsung saja buka notepad atau editor lain lalu buat halaman web dengan source seperti di bawah :
<html>
<head>
<title>TIMER JAVASCRIPT</title>
<script type="text/javascript" src="timer.js"></script>
</head>
<body onload="timer()">
<h3>TIMER 5 MENIT: </h3>
<div id="time">
</div>
</body>
</html>
Setelah itu simpan dengan nama namafile.html.
Di kode diatas terdapat fungsi timer() yang dipanggil saat laman web mulai dipanggil (onload).Fungsi ini akan dibuat dengan kode JavaScript seperti dibawah ini :
var jj=0
var mm=5;
var dd=0;
function timer() {
if (jj !== 0 || mm !== 0 || dd !== 0) {
var s = pad(jj.toString()) + " : " + pad(mm.toString()) + " : " + pad(dd.toString());
document.getElementById("time").innerHTML = s;
if(dd === 0) {
dd = 60;
if (mm === 0 && jj > 0)
{
mm = 60;
jj--;
}
mm--;
}
dd--;
show();
}
else {
document.getElementById("time").innerHTML = "WAKTU HABIS";
}
};
function show() {
setTimeout("timer()",1000);
}
//fungsi untuk format hh:mm:ss
function pad(x) {
var str = "";
if (x.length < 2) {
str = "0" + x;
}
else {
str = x;
}
return str;
}
Kemudian simpan dengan nama timer.js. Selamat mencoba...
2 komentar:
Kalau memanggil total waktu dari tabel database gimana gan? contohnya mau buat ujian online, setiap mata pelajaran kan waktunya beda-beda...
yang di atas agar di refersh tidak kembali ke waktu awal gmana?
Post a Comment