Kamis, 08 Mei 2014
0 komentar

Membuat Jam Digital Dengan Menggunakan Javascript



Untuk membuat jam digital dengan javascript pertama kita tulis dulu kode html seperti di bawah ini :

<html>
    <head>
        <title>Jam Digital</title>
    <body>
    </body>
</head>
</html>

Kemudian tulis kode javascript berikut ini :
<script language="javascript" type="text/javascript">
    function renderTime() {
        var waktuSekarang = new Date();
        var diem = "AM";
        var h = waktuSekarang.getHours();
        var m = waktuSekarang.getMinutes();
        var s = waktuSekarang.getSeconds();
        setTimeout('renderTime()',1000);
        if (h == 0) {
            h = 12;
        } else if (h > 12) { 
            h = h - 12;
            diem="PM";
        }
        if (h < 10) {
            h = "0" + h;
        }
        if (m < 10) {
            m = "0" + m;
        }
        if (s < 10) {
            s = "0" + s;
        }
        var jamDigital = document.getElementById('clockDisplay');
        jamDigital.textContent = h + ":" + m + ":" + s + " " + diem;
        jamDigital.innerText = h + ":" + m + ":" + s + " " + diem;
    }
    renderTime();
</script>

Setelah menulis kode javascript, sekarang tampilkan jama digital dengan menggunakan kode berikut :
<center><div id="clockDisplay" class="clockStyle"></div></center>

Sehingga keseluruhan kode nya adalah sebagai berikut :
<html>
    <head>
        <title>Jam Digital</title>
        <script type="text/javascript" language="javascript">
            function renderTime() {
                var waktuSekarang = new Date();
                var diem = "AM";
                var h = waktuSekarang.getHours();
                var m = waktuSekarang.getMinutes();
                var s = waktuSekarang.getSeconds();
                setTimeout('renderTime()',1000);
                if (h == 0) {
                    h = 12;
                } else if (h > 12) { 
                    h = h - 12;
                    diem="PM";
                }
                if (h < 10) {
                    h = "0" + h;
                }
                if (m < 10) {
                    m = "0" + m;
                }
                if (s < 10) {
                    s = "0" + s;
                }
                var jamDigital = document.getElementById('clockDisplay');
                jamDigital.textContent = h + ":" + m + ":" + s + " " + diem;
                jamDigital.innerText = h + ":" + m + ":" + s + " " + diem;
            }
            renderTime();
        </script>
    <body>
    <center><div id="clockDisplay" class="clockStyle"></div></center>
</body>
</head>
</html>

Jalankan melalui browser anda, pastikan web server sudah aktif, maka akan tampil sebagai berikut :


 
Toggle Footer
Top