Cara Membuat Jam Digital dengan Javascript

09/10/2017    Risman Hakim    180     Website

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.

Artikel, jQuery, Web Design, Javascript, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More