Penulis Gimana nih kabar sobat semua? Semoga baik dan tetep semangat untuk belajar ya sob. Pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat jam digital menggunakan Javascript dan CSS.
Gimana sih cara buatnya ?
sebenarnya cara membuat jam digital ini cukup mudah gan..,
dimana kita hanya perlu mengambil waktu sekarang dengan menggunakan fungsi Date() milik javascript kemudian kita eksekusi berulang-ulang dengan menggunakan fungsi setInterval agar seolah olah detiknya berjalan.
Kalau kita gunakan javascript, lantas untuk apa CSS nya ?
seperti yang kita ketahui, CSS merupakan sebuah code pemrogramman yang bertujuan untuk mengatur / mempercantik tampilan sebuah website. Dengan penjelasan demikian, kita memerlukan CSS untuk mempercantik tampilan Jam Digital yang nantinya kita buat.
baik sobat tidak usah berlama-lama lagi, silahkan sobat siapkan perlengkapan tempurnya 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 php, saya rasa kita cukup menggunakan file dengan extensi html. silahkan sobat ketik script di bawah ini pada file html yang telah sobat buat.
jika sudah silahkan sobat save dalam sebuah folder.
2. Siapkan file jam.js
file kedua adalah file javascript-nya ya sob, disini saya memberi nama jam.js silahkan sobat membuat sebuah file baru dan simpan menggunakan extensi js, lalu silahkan
ketikkan script di bawah ini :
jika sudah silahkan sobat save script tersebut dalam folder tempat sobat menyimpan file index tadi.
3. File style.css
file yang ketiga ialah file yang akan kita gunakan untuk menyimpan script css, sebagai contoh saya memberi nama file tersebut dengan nama style dengan extensi css. jika sobat sudah membuat filenya, silahkan sobat
ketik script dibawah ini :
jika sudah silahkan sobat simpan. perlu sobat lihat 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.
Bagi sobat yang kebingungan mengikuti
langkah - langkah di atas, silahkan klik link download di bawah ini untuk mendapatkan source code nya.
EmoticonEmoticon