Cara menggunakan kode javascript jam digital

Javascript adalah salah satu bahasa pemrograman tingkat tinggi yang bertipe interpreter. Javascript berfungsi untuk validasi atau manipulasi data baik tampilan atau sistem yang ada di dalam website.

Pada saat kamu membuat website yang bersifat informasi yang disampaikan oleh publik atau masyarakat, seperti website berita, ramalan cuaca, bisnis, bank, dan aktivitas lainnya, pasti kamu membutuhkan informasi terkini pada aktivitas website tersebut. Penulis akan memberikan tutorial untuk menampilkan jam digital sederhana dengan Javascript.

Berikut cara membuat menampilkan jam digital sederhana dengan Javascript.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.





Jam Digital






    

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “tampil-jam-digital-javascript.html”.

5. Klik Save.

Cara menggunakan kode javascript jam digital

6. Cari file yang tadi, kemudian klik kanan pada mouse  – Open With  – Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Cara menggunakan kode javascript jam digital

Selesai.

Kini, kamu bisa menampilkan jam digital di dalam website buatan kamu dengan Javascript, agar si pengunjung (visitor) bisa mengetahui waktu saat ini pada membuka website kamu.

Demikian tutorial cara menampilkan jam digital sederhana dengan Javascript. Selamat mencoba.

Cara menggunakan kode javascript jam digital

03/12/2017    Risman Hakim    19539    Website

Cara menggunakan kode javascript jam digital

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.


    


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.


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 menggunakan kode javascript jam digital

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