Create A Real Time Digital Clock In Javascript

Clocks can be used on sites where time is of great concern such as certain booking sites or a specific application that shows the arrival times of trains, buses, planes, etc. The clock is basically two types, Analog and Digital.We will making a digital clock in javascript.

 

Add HTML

In this section, we have a time stamp with the format “HH: MM: SS” wrapped inside the “div” tag.

<!DOCTYPE html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content= 
         "width=device-width, initial-scale=1.0">
      <title>Javascript Digital Clock</title>
   </head>
   <body>
      <div id="myclock">09:12:10</div>
   </body>
</html>

 

Add CSS

In CSS , We style this font size and changing the height , weight of div element.

#myclock { 
  font-size: 60px; 
  width: 300px; 
  margin: 3px; 
  text-align: center; 
  border: 3px solid blue; 
  border-radius: 20px; 
  color:blue;
}

 

Add JavaScript

Add this javascript code for make this clock running.

setInterval(showTime, 1000); 

function showTime() { 

    let time = new Date(); 

    let hour = time.getHours(); 

    let min = time.getMinutes(); 

    let sec = time.getSeconds(); 

    am_pm = "AM"; 
  

    if (hour > 12) { 
        hour -= 12; 
        am_pm = "PM"; 

    } 

    if (hour == 0) { 
        hr = 12; 
        am_pm = "AM"; 

    } 

    hour = hour < 10 ? "0" + hour : hour; 
    min = min < 10 ? "0" + min : min; 
    sec = sec < 10 ? "0" + sec : sec; 
  
    let currentTime = hour + ":" 

  + min + ":" + sec + am_pm; 

    document.getElementById("myclock") 

            .innerHTML = currentTime; 
} 
showTime();

 

Full Code

It is the combination of html, css and javascript.

<!DOCTYPE html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content= 
         "width=device-width, initial-scale=1.0">
      <title>Javascript Digital Clock</title>
      <style>
         #myclock { 
         font-size: 60px; 
         width: 300px; 
         margin: 30px; 
         text-align: center; 
         border: 3px solid blue; 
         border-radius: 20px; 
         color:blue;
         }
      </style>
      <script>
         setInterval(showTime, 1000); 
         
         function showTime() { 
         
             let time = new Date(); 
         
             let hour = time.getHours(); 
         
             let min = time.getMinutes(); 
         
             let sec = time.getSeconds(); 
         
             am_pm = "AM"; 
           
         
             if (hour > 12) { 
                 hour -= 12; 
                 am_pm = "PM"; 
         
             } 
         
             if (hour == 0) { 
                 hr = 12; 
                 am_pm = "AM"; 
         
             } 
         
             hour = hour < 10 ? "0" + hour : hour; 
             min = min < 10 ? "0" + min : min; 
             sec = sec < 10 ? "0" + sec : sec; 
           
             let currentTime = hour + ":" 
         
           + min + ":" + sec + am_pm; 
         
             document.getElementById("myclock") 
         
                     .innerHTML = currentTime; 
         } 
         showTime();
      </script>
   </head>
   <body>
      <div id="myclock">09:12:10</div>
   </body>
</html>

 

Result

Leave a Comment

Your email address will not be published.