Halo, ketemu lagi dengan saya, kali ini saya akan bagikan tutorial mengenai Cara Membuat Jam Digital Dengan Javascript, mungkin diantara kalian ada yang masih bingung bagaimana cara membuat jam, di bawah ini saya kasih langkah-langkahnya.
Langsung saja, silakan kalian buat struktur HTML seperti berikut.
1 2 3 4 5 6 7 |
<ul> <li id="hours"></li> <li id="point">:</li> <li id="min"></li> <li id="point">:</li> <li id="sec"></li> </ul> |
Setelah itu, kita akan buat desain jam menjadi lebih menarik lagi dengan CSS berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; } ul li { display:inline; font-size:10em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; } #point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; } @-webkit-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } @-moz-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } body{background: #202020} |
Kalo sudah, sekarang kita buat fungsi jam digital dengan Javascript berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var degree = 0, timer,h,m,s; rotate(); function rotate() { timer = setTimeout(function() { rotate(); h= new Date().getHours(); m= new Date().getMinutes(); s= new Date().getSeconds(); if(h>12){ h=h-12}//12 hour time format $('#hours').html(h); $('#min').html(m); $('#sec').html(s); },1); } |
Nah, kalo sudah, simpan dulu kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai.
Baik itulah tadi tutorial mengenai Cara Membuat Jam Digital Dengan Javascript, semoga bermanfaat, amin.
Selamat mencoba 🙂