Membuat Jam Digital dengan JavaScript - adakalanya saat kita membuat website agar terlihat keren kita membutuhkan sesuatu yang lebih memnjakan tampilan contohnya dengan menambahkanjam digital pada sebuah website. Kali ini saya akan share tutorial cara membuat jam digital dengan detik terus berjalan seperti aslinya dengan javascript.
Cara Membuat Jam Digital dengan JavaScript
Oke kita langsung saja, pertama buatlah projek dengan nama terserah anda kemudian salin kode berikut dan simpan dengan nama index.php atau dengan .html
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT JAM DIGITAL SENDIRI</title>
<script type="text/javascript">
window.onload = function() { jam(); }
function jam() {
var e = document.getElementById('jam'),
d = new Date(), h, m, s;
h = d.getHours();
m = set(d.getMinutes());
s = set(d.getSeconds());
e.innerHTML = h +':'+ m +':'+ s;
setTimeout('jam()', 1000);
}
function set(e) {
e = e < 10 ? '0'+ e : e;
return e;
}
</script>
</head>
<body>
<center>
<h1 style="font-size: 120px; font-family: verdana;" id="jam"></h1>
</center>
</body>
</html>
<html>
<head>
<title>MEMBUAT JAM DIGITAL SENDIRI</title>
<script type="text/javascript">
window.onload = function() { jam(); }
function jam() {
var e = document.getElementById('jam'),
d = new Date(), h, m, s;
h = d.getHours();
m = set(d.getMinutes());
s = set(d.getSeconds());
e.innerHTML = h +':'+ m +':'+ s;
setTimeout('jam()', 1000);
}
function set(e) {
e = e < 10 ? '0'+ e : e;
return e;
}
</script>
</head>
<body>
<center>
<h1 style="font-size: 120px; font-family: verdana;" id="jam"></h1>
</center>
</body>
</html>
Setelah itu silahkan anda simpan dan coba jalankan projek anda di browser apakah sudah bisa berjalan jika sudah berjalan maka hasilnya akan seperti pada gambar dibawah ini.
Indrawan10