Membuat Jam Sederhana Dengan HTML Dan Javascript

Kali ini kita akan mencoba membuat jam sederhana dengan menggunakan html dan javascript. Jam sederhana ini dapat sobat tambahkan untuk memperindah tampilan blog yang dapat diletakkan dibagian mana saja pada blognya sobat semua.


Cara Membuat Jam Digital Sederhana Dengan HTML Dan Javascript


Sesuai dengan judulnya jam sederhana ini hanya menggunakan html dan javascript. Langsung saja, silahkan buka notepad sobat dan pastekan script dibawah ini.


<!DOCTYPE html>  
 <html>  
   <head>  
     <title>Jam Digital Sederhana</title>  
     <script type="text/javascript">  
       // This function gets the current time and injects it into the DOM  
       function updateClock() {  
         // Gets the current time  
         var now = new Date();  
         // Get the hours, minutes and seconds from the current time  
         var hours = now.getHours();  
         var minutes = now.getMinutes();  
         var seconds = now.getSeconds();  
         // Format hours, minutes and seconds  
         if (hours < 10) {  
           hours = "0" + hours;  
         }  
         if (minutes < 10) {  
           minutes = "0" + minutes;  
         }  
         if (seconds < 10) {  
           seconds = "0" + seconds;  
         }  
         // Gets the element we want to inject the clock into  
         var elem = document.getElementById('clock');  
         // Sets the elements inner HTML value to our clock data  
         elem.innerHTML = hours + ':' + minutes + ':' + seconds;  
       }  
     </script>  
   </head>  
   <!--  
     This is the key to making the clock function.  
     When the page loads, it calls the javascript function "setInterval()",  
     which will call our function "updateClock()" once every 200 milliseconds.  
   -->  
   <body onload="setInterval('updateClock()', 200);">  
     <!-- This is the container for our clock, it can be any HTML element. -->  
     <h1 id="clock"></h1>  
   </body>  
 </html>  


Bagaimana.., gampang bukan...? Silahkan tambahkan css agar dapat membuat tampilannya lebih bagus lagi.

Baca Juga Button Menu Dengan HTML Dan Javascript 

Demikian Cara Membuat Jam Sederhana Dengan HTML Dan Javascript, Semoga Bermanfaat
Previous
Next Post »