Membuat Jam Analog dan Digital Dengan Javascript
Membuat Jam Analog dan Digital Dengan Javascript
Membuat Jam Analog dan Digital Dengan Javascript – Seperti yang sudah kita pelajari dan dijelaskan sebelumnya pada tutorial Javascript dasar di malasngoding.com.
Bahwa javascript bisa kita gunakan untuk membuat halaman website menjadi lebih interaktif. contohnya seperti tutorial Membuat Jam Analog dan Digital Dengan Javascript ini.
Kita bisa membuat jam digital dengan javascript. dan kita juga bisa membuat jam analog dengan javascript. dan caranya pun sangat mudah. karena kita hanya menggunakan syntax dan fungsi-fungsi dasar yang sudah kita pelajari bersama-sama pada tutorial dasar javascript.
BACA JUGA : Tutorial javascript dasar untuk pemula
Langsung saja kita masuk ke bagian materi. silahkan teman-teman perhatikan dan ikuti secara teliti dan seksama.
Membuat Jam Analog dan Digital Dengan Javascript
Saya asumsikan kepada teman-teman untuk membaca terlebih dulu tutorial-tutorial javascript dasar di www.malasngoding.com. agar lebih mudah memahami syntax atau coding jam dengan javascript yang sebentar lagi akan kita buat.
membuat jam analog dan digital dengan javascript
Di tutorial ini kita akan belajar membuat jam digital dengan javascript. dan belajar membuat jam analog sederhana dengan javascript. dimana nantinya jam yang kita buat ini bisa teman-teman terapkan codingnya ke blog atau website teman-teman sebagai widget jam.
Kita mulai dengan belajar membuat jam digital.
Membuat Jam Digital Dengan Javascript
Untuk cara membuat jam digital dengan javascript silahkan teman-teman ketik coding berikut. dan menyimpannya di dalam file HTML atau PHP. di sini saya menyimpannya dalam file dengan nama jam_digital.html
jam_digital.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html> <head> <title>Membuat Jam Digital Dengan Javascript - www.malasngoding.com</title> </head> <body> <style> h1,h2,p,a{ font-family: sans-serif; font-weight: normal; } .jam-digital-malasngoding { overflow: hidden; width: 330px; margin: 20px auto; border: 5px solid #efefef; } .kotak{ float: left; width: 110px; height: 100px; background-color: #189fff; } .jam-digital-malasngoding p { color: #fff; font-size: 36px; text-align: center; margin-top: 30px; } </style> <center> <h1>Tutorial Membuat Jam Digital Dengan Javascript</h1> <h2>www.malasngoding.com</h2> </center> <div class="jam-digital-malasngoding"> <div class="kotak"> <p id="jam"></p> </div> <div class="kotak"> <p id="menit"></p> </div> <div class="kotak"> <p id="detik"></p> </div> </div> <center> <a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript">TUTORIAL</a> </center> <script> window.setTimeout("waktu()", 1000); function waktu() { var waktu = new Date(); setTimeout("waktu()", 1000); document.getElementById("jam").innerHTML = waktu.getHours(); document.getElementById("menit").innerHTML = waktu.getMinutes(); document.getElementById("detik").innerHTML = waktu.getSeconds(); } </script> </body> </html> |
Dan jika di jalankan maka hasilnya akan seperti berikut.
membuat jam digital dengan javascript
Seperti yang terlihat pada gambar jam digital di atas. jam, menit, detiknya pun muncul dengan real time.
Sesuai dengan jam pada saat ini, yaitu jam 15:17 WIB.
Penjelasan Jam Digital Javascript
Perhatikan pada syntax di atas tadi. kita membuat beberapa element HTML yang kita beri penamaan class dan id masing-masing.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="jam-digital-malasngoding"> <div class="kotak"> <p id="jam"></p> </div> <div class="kotak"> <p id="menit"></p> </div> <div class="kotak"> <p id="detik"></p> </div> </div> |
ada 3 element penting di sana, yang kita beri id jam, id menit, dan id detik. pada masing-masing id tersebut akan kita tampilkan sesuai dengan nama id nya masing-masing dengan javascript. misalnya pada id jam kita tampilkan jam sekarang, pada id menit kita tampilkan menit sekarang, dan pada id detik kita tampikan detik yang berjalan sekarang secara real-time.
perhatikan pada bagian javascript.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> window.setTimeout("waktu()", 1000); function waktu() { var waktu = new Date(); setTimeout("waktu()", 1000); document.getElementById("jam").innerHTML = waktu.getHours(); document.getElementById("menit").innerHTML = waktu.getMinutes(); document.getElementById("detik").innerHTML = waktu.getSeconds(); } </script> |
di sini kita memerintahkan menjalankan function waktu() saat 1 detik pertama halaman ini di jalankan.
dan perhatikan pada function waktu(). di sana kita membuat sebuah variabel dengan nama “waktu”. dan menimpan data waktu atau tanggal sekarang.
|
1 |
var waktu = new Date(); |
kemudian menjalankan lagi function waktu() setelah 1 detik. ini untuk membuat perintah agar fungsi ini di jalankan setiap detik. sesuai dengan jam digital yang menampikan perubahan detiknya setiap 1 detik sekali.
dan terakhir, data waktu atau tanggal yang terlah tersimpan dalam variabel waktu tadi kita pecah-pecah isinya dengan cara menampilkan jam ( waktu.getHours() ) pada id jam. menampilkan menit ( waktu.getMinutes() ) pada id menit. serta menampilkan detik (waktu.getSeconds() ) pada id detik.
|
1 2 3 |
document.getElementById("jam").innerHTML = waktu.getHours(); document.getElementById("menit").innerHTML = waktu.getMinutes(); document.getElementById("detik").innerHTML = waktu.getSeconds(); |
Oke selesai, diharapakan teman-teman bisa mudah memahami penjelasan ini. jika teman-teman masih kurang mengerti, silahkan untuk meninggalkan komentar di akhir tutorial ini. insyallah jika ada kemudahan waktu akan saya balas.
Selanjutnya kita akan belajar membuat jam analog sederhana tapi keren dengan javascript.
Membuat Jam Analog Dengan Javascript
Kita lanjutkan dengan belajar membuat jam analog dengan javascript.
Perhatikan syntax berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<!DOCTYPE html> <html> <head> <title>Membuat Jam Digital Dengan Javascript - www.malasngoding.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <style type="text/css"> h1,h2,p,a{ font-family: sans-serif; font-weight: normal; } .jam_analog_malasngoding { background: #e7f2f7; position: relative; width: 240px; height: 240px; border: 16px solid #52b6f0; border-radius: 50%; padding: 20px; margin:20px auto; } .xxx { height: 100%; width: 100%; position: relative; } .jarum { position: absolute; width: 50%; background: #232323; top: 50%; transform: rotate(90deg); transform-origin: 100%; transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1); } .lingkaran_tengah { width: 24px; height: 24px; background: #232323; border: 4px solid #52b6f0; position: absolute; top: 50%; left: 50%; margin-left: -14px; margin-top: -14px; border-radius: 50%; } .jarum_detik { height: 2px; border-radius: 1px; background: #F0C952; } .jarum_menit { height: 4px; border-radius: 4px; } .jarum_jam { height: 8px; border-radius: 4px; width: 35%; left: 15%; } </style> <center> <h1>Tutorial Membuat Jam Digital Dengan Javascript</h1> <h2>www.malasngoding.com</h2> </center> <div class="jam_analog_malasngoding"> <div class="xxx"> <div class="jarum jarum_detik"></div> <div class="jarum jarum_menit"></div> <div class="jarum jarum_jam"></div> <div class="lingkaran_tengah"></div> </div> </div> <center> <a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript">TUTORIAL</a> </center> <script type="text/javascript"> const secondHand = document.querySelector('.jarum_detik'); const minuteHand = document.querySelector('.jarum_menit'); const jarum_jam = document.querySelector('.jarum_jam'); function setDate(){ const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; secondHand.style.transform = `rotate(${secondsDegrees}deg)`; if (secondsDegrees === 90) { secondHand.style.transition = 'none'; } else if (secondsDegrees >= 91) { secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)' } const minutes = now.getMinutes(); const minutesDegrees = ((minutes / 60) * 360) + 90; minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; const hours = now.getHours(); const hoursDegrees = ((hours / 12) * 360) + 90; jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`; } setInterval(setDate, 1000) </script> </body> </html> |
Coba jalankan pada browser dan hasilnya seperti berikut.
membuat jam analog dengan javascript
Dan selesai. caranya tidak jauh berbeda dengan penjelasan sebelumnya.
Teman-teman bisa menerapkan syntax jam analog atau jam digital dengan javascript ini langsung pada website atau blog teman-teman. dan bisa mengubah css nya agar tampilan jam nya bisa sesuai dengan keinginan teman-teman.
Terima kasih sudah mengikuti tutorial Membuat Jam Analog dan Digital Dengan Javascript. semoga contoh coding javascript ini dapat bermanfaat.
Tutorial Menarik Lainnya
Membuat Game Tebak Angka Dengan JavaScript
Fungsi Terbilang Dengan JavaScript
Membuat Show Hide Password Di HTML
Menghitung Jumlah Kata Menggunakan Javascript
Terimakasih, sangat membantu 🙂
keren mas
kok saya masih error pada bagian innerHTML = waktu.getHours() nya padahal sudah saya cek dan masih saja error, tidak menampilkan jamnya
gimana cara nya menambahka titik 2 antara jam dan menit dan detik…seperti 12:02:01….dan gimana caranya supaya angka di bawah sepuluh tetap 2 digit ..01,02,03,…dst….menurut saya kekurangan nya itu untuk jam digital ini.
terimakasih sebelum nya
ini kak
https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript/