KangJaz.com

Tempat Tips, Tutorial dan Source Code dari seorang newbie

Membuat Animasi Jam Digital dengan CSS dan JavaScript

25 Agustus 2017 | Kategori : JavaScript

Hai hai hai sobat semua... gimana nih kabarnya ? Semoga sobat dalam keadaan baik dan tetap semangat untuk belajar ya. Oke, pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat jam digital menggunakan javascript dan CSS tentunya.

laptop-3309864_1280.jpg

(sumber gambar: https://pixabay.com/en/laptop-business-aerial-appointment-3309864/)

Gimana sih cara buatnya ?

Sebenarnya cara membuat jam digital ini cukup mudah kok sob, dimana kita hanya perlu mengambil waktu sekarang dengan fungsi Date() milik javascript kemudia kita eksekusi berulang-ulang dengan fungsi setInterval agar seolah detiknya berjalan.

Kalau kita hanya perlu javascript, lantas untuk apa CSS nya ?

Seperti yang kita ketahui, bahwa CSS merupakan sebuah code pemrogramman yang bertujuan untuk mengatur / mempercantik tampilan sebuah website. Dengan demikian, kita memerlukan CSS untuk mempercantik tampilan Jam Digital yang akan kita buat.

Baik sobat tidak usah berlama-lama lagi, silahkan sobat siapkan perlengkapan codingnya dan silahkan sobat ikuti langkah-langkah di bawah ini :

1. Siapkan file index.html

FIle yang pertama harus ada adalah file index, berhubung kita tidak bermain dengan database, saya rasa cukup menggunakan file dengan extensi html. Silahkan sobat ketikkan script di bawah ini pada file html yang telah sobat buat.

Jika sudah silahkan sobat simpan dalam sebuah folder.

2. Siapkan file jam.js

File kedua adalah file javascript-nya ya sob, disini saya akan memberi nama jam.js, silahkan sobat membuat file baru lalu silahkan ketikkan script di bawah ini pada file tersebut :

Jika sudah silahkan sobat simpan script tersebut dalam folder tempat sobat menyimpan index tadi, oh iya, perlu diingat, extensi yang digunakan adalah .js ya sob

3. File style.css

File yang ketiga ialah file css, sebagai contoh saya akan membuat sebuah file dan memberi nama file tersebut dengan nama style dengan extensi .css. Jika sobat sudah membuat filenya, sekarang silahkan sobat ketik script di bawah ini :

jika sudah silahkan sobat simpan. Perlu sobat perhatikan pada script animation terdapat script turn pastikan script tersebut sama dengan nama keyframes yang ada di bawahnya ya sob.

sekarang silahkan sobat coba jalankan, jika sobat menggunakan extensi html pada index nya, sobat bisa langsung mendouble click pada file index nya, dan hasilnya seperti yang sobat lihat di bawah ini

Bagi sobat yang kebingungan mengikuti langkah-langkah di atas, silahkan klik link download di bawah ini untuk mendapatkan source code nya