Membuat Jam Digital dengan JavaScript

Waktu merupakan hal yang sangat erat kaitannya dengan kita. Jika berbicara soal waktu, pasti yang diingat adalah jam. Saat sedang menunggu jam istirahat karena sedang lapar, apa yang dilakukan pertama? Melihat jam. Saat sedang menuju perjalanan kantor dan berpikir takut telat, apa yang dilakukan pertama? Melihat jam. Begitu erat kaitannya jam dengan waktu.

Jam yang sering kita lihat adalah jam analog dan jam digital. Dan yang terlihat lebih mudah digunakan dan dipahami adalah jam digital. Karena dia dengan lengkap menampilkan jam, menit dan detik. Hari ini kita akan mencoba membuat Jam Digital dengan JavaScript. Langsung saja ya.

Ketikkan script berikut :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jam Digital</title>
<script type="text/javascript">
    window.setTimeout("waktu()",1000);
    function waktu() {
        var tanggal = new Date();
        setTimeout("waktu()",1000);
        document.getElementById("jam").innerHTML = tanggal.getHours();
        document.getElementById("menit").innerHTML = tanggal.getMinutes();
        document.getElementById("detik").innerHTML = tanggal.getSeconds();
    }
</script>
</head>

<style>
    #jam-digital{overflow:hidden; width:350px}
    #hours{float:left; width:100px; height:50px; background-color:#6B9AB8; margin-right:25px}
    #minute{float:left; width:100px; height:50px; background-color:#A5B1CB}
    #second{float:right; width:100px; height:50px; background-color:#FF618A; margin-left:25px}
    #jam-digital p{color:#FFF; font-size:36px; text-align:center; margin-top:4px}
</style>

<body onLoad="waktu()">
    <div id="jam-digital">
        <div id="hours"><p id="jam"></p></div>
        <div id="minute"><p id="menit"></p></div>
        <div id="second"><p id="detik"></p></div>
    </div>
</table>
</body>
</html>

Save dan hasilnya akan menjadi seperti berikut :

See the Pen VYxyBq by Dumet_School (@dumet_school) on CodePen.

Semoga bermanfaat ya :)

24 Februari 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat