Cara Membuat Jam Digital Menggunakan Javascript dan CSS

03/12/2017    Risman Hakim    62     Website

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.

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