How to create a Simple Clock using Javascript

Create a program to display the clock on the output screen using the javascript function. Let’s create a simple web page to design and perform create a clock using javascript function, HTML, CSS.

Problem statement

In this task, we have to create a simple clock using a javascript function. For that create an HTML file and use the js function that displays the output.

Solution

Create HTML file
Enter heading clock in tag
Take a division class id is a clock and download the page it will show the current time on screen <div id = “clock” onload=”currentTime()”></div>
Use CSS for the design of web page
In script Create function currentTime() create instance of date object var date = new Date();
Next using the Date object method get hours, minutes, and seconds var hh = date.getHours() var mm = date.getMinutes(); var ss = date.getSeconds();
The date object works on 24-hour format depending on the hour value set the AM/PM var session = “AM”; it changes AM/PM according to 12-hour format.
Use if loop to make string using hh:mm: ss format changing these values we get from date object method if(hh === 0){ hh = 12; } if(hh > 12){ hh = hh – 12; session = “PM”; }
Convert time in two-digit format HH:MM:SS hh = (hh < 10) ? “0” + hh : hh; mm = (mm < 10) ? “0” + mm : mm; ss = (ss < 10) ? “0” + ss : ss; and initialize time in HH:MM:SS format var time = hh + “:” + mm + “:” + ss + ” ” + session;
Now replace string variable in innerText property document.getElementById(“clock”).innerText = time;
At the end call the function every second use setinterval() method set time interval as 1000ms to 1s var t = setTimeout(function(){ currentTime() }, 1000) which reloading time as setinterval() will call first after 1s of loading .

JS code to create a clock using javascript function

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Clock time</title>
        <h8>Clock</h8>

</head>
<body>
<div id = "clock" onload="currentTime()"></div>

</body>
<style type="text/css">
h8{
    text-align: center;
    color: black;

}
    body {
  font-family: system-ui;
  font-size: 100px;
  background: #CF9FFF;
  color: white;
  text-align: center;
  border: 5px solid black;
  border-radius: 100px;

}

</style>
<script type="text/javascript">
function currentTime() {
  var date = new Date(); 
  var hh = date.getHours();
  var mm = date.getMinutes();
  var ss = date.getSeconds();
  var session = "AM";

  if(hh === 0){
      hh = 12;
  }
  if(hh > 12){
      hh = hh - 12;
      session = "PM";
   }

   hh = (hh < 10) ? "0" + hh : hh;
   mm = (mm < 10) ? "0" + mm : mm;
   ss = (ss < 10) ? "0" + ss : ss;
    
   var time = hh + ":" + mm + ":" + ss + " " + session;

  document.getElementById("clock").innerText = time; 
  var t = setTimeout(function(){ currentTime() }, 1000);
}

currentTime();
</script>
</html>

Output

In this way, we learn how to create a clock using JavaScript.