Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Saat ini jam merupakan sebuah benda yang sangat penting sekali dalam informasi waktu, apalagi saat ini ada berbagai jenis jam yang bisa kita temukan salah satunya adalah jam digital. Jam digital bisa kita buat didalam sebuah halaman website tentunya jam digital yang kita buat adalah untuk memberikan informasi waktu kepada setiap pengunjung agar tidak lupa waktu :). Nah, berikut ini saya akan sahre bagaimana Cara Membuat Jam Digital Menggunakan Javascript dan CSS. Caranya cukup mudah kalian cukup mengikuti langkah-langkah berikut dengan baik.

Langkah 1 : Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Baik langsung saja, silahkan kalian ketikan kode HTML sederhana berikut ini.

<body>
    <div id="watch"></div>
</body>

Kode HTML diatas adalah kode struktur dari jam digitala yang akan dibuat. Selanjutnya kita akan membuat fungsi jam digital dengan kode Javascript berikut.

Langkah 2 : Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Silahkan kalian ketikan kode Javascript berikut untuk membuat jam digital.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        function clock() {
          var now = new Date();
          var secs = ('0' + now.getSeconds()).slice(-2);
          var mins = ('0' + now.getMinutes()).slice(-2);
          var hr = now.getHours();
          var Time = hr + ":" + mins + ":" + secs;
          document.getElementById("watch").innerHTML = Time;
          requestAnimationFrame(clock);
        }

        requestAnimationFrame(clock);
    });
</script>

Pada kode Javascript diatas, kalain ketikan juga atau load library jQuery agar kode fungsi dari kode Javascript yang kita buat bisa berjalan dengan baik.

Langkah 3 : Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Selanjutnya kita akan butuh CSS, seperti yang kita ketahui bahwa CSS berfungsi untuk mempercantik tampilan web, maka dari itu kita tambahkan kode CSS berikut untuk mempercatik tampilan jam digital nya.

@import url('https://fonts.googleapis.com/css?family=Ruluko');
body {
  background-color: #2c3e50;
  font-family: 'Ruluko', sans-serif;
}

#watch {
  color: rgb(252, 150, 65);
  position: fixed;
  z-index: 1;
  height: 1.4em;
  width: 3.8em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 10vw;
  -webkit-text-stroke: 3px rgb(210, 65, 36);
  text-shadow: 4px 4px 10px rgba(210, 65, 36, 0.4),
               4px 4px 20px rgba(210, 45, 26, 0.4),
               4px 4px 30px rgba(210, 25, 16, 0.4),
               4px 4px 40px rgba(210, 15, 06, 0.4);
}

Setelah semua kode diatas telah diketikan, simpan filenya kemudian kalian buka pada browser masing-masing dan lihat hasilnya, jika berhasil maka tampilan jam digitala akan tampak seperti gambar dibawah ini.

Cara Membuat Jam Digital Menggunakan Javascript dan CSS

Bailah, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Jam Digital Menggunakan Javascript dan CSS, semoga bermanfaat dan selamat mencoba.

3 Desember 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