Cara Membuat Jam Digital dengan Javascript

Javascript merupakan bahasa client side yang yang sangat populer sekali saat ini, dengan Javascript kita tidak perlu lagi menginstall server untuk menjalankan file Javascript nya, seperti halnya PHP yang harus menjalankan web server yakni Apache untuk menjalankan semua file PHP. Dengan perkembangan yang sangat cepat saat ini Javascript telah banyak dibuat dalam bentuk framework, seperti yang kita ketahui bahwa framework Javascript saat ini sudah banyak sekali, sebagai contoh framework dari javascript adalah AngularJS, ReactJS, Vue.js, Ember.js, Meteor.js dan masih banyak lagi framework-framework yang lainnya. Dalam pengaplikasiannya Javascript banyak sekali digunakan dalam hal desain web agar terlihat lebih menarik, dan tentunya menjadikan tampilan web menjadi lebih interaktif dan lebih dinamis.
Akan tetapi pada kesempaatan kali ini saya tidak akan membahas mengenai framework dari javascript nya melainkan kita akan mencoba membuat sesuatu dengan menggunakan kode Javascript, yakni kita akan membuat jam digital dengan menggunakan Javascript. Nah, bagaimana cara membuatnya, simak langkah-langkahnya berikut ini.
Untuk membuat jam digital, hal pertama yang harus kita buat adalah membuat struktur jam terlebih dahulu dengan kode HTML5 berikut ini.

<body>
    <span class="jam"></span>
</body>

Setelah membuat struktur jam seperti diatas, langkah selanjutnya adalah kita desain tampilan jam digital dengan kode CSS3 berikut ini.

.jam {
        font-size: 4em;
        background-color: #bdc3c7;
        border: 2px solid #d35400;
        border-radius: 5px;
        padding: 10px;
     }

Setelah semua kode HTML5 dan CSS3 diketikan, kode terakhir adalah kode Javascript untuk membuat fungsi jam digitalnya, berikut adalah kode Javascript untuk fungsi jam digital.

<script type="text/javascript">
    function jam() {
    var time = new Date(),
        hours = time.getHours(),
        minutes = time.getMinutes(),
        seconds = time.getSeconds();
    document.querySelectorAll('.jam')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);
      
    function harold(standIn) {
        if (standIn < 10) {
          standIn = '0' + standIn
        }
        return standIn;
        }
    }
    setInterval(jam, 1000);
</script>

Jika sudah semua kode diketikan, simpan filenya kemudian silahkan kalian buka pada browser masing-masing dan lihat hasilnya, maka akan terlihat seperti gambar berikut untuk tampilan jam digital nya.
Cara Membuat Jam Digital dengan Javascript
Bagaimana, cukup mudah bukan untuk membuat jam digital dengan Javascript. Sekian tutorial sederhana mengenai cara membuat jam digital dengan Javascript, semoga bermanfaat dan selamat mencoba.

9 Oktober 2017

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