Digital Clock

DEMO

Step by Step Algorithm:

1. Create an HTML document with a head and body element. In the head, specify the character encoding and viewport, and include a title and style element. In the style element, define styles for the body element that specify the text alignment, font size, background color, color, and font family. In the body, create a div element with an id of "clock".

2. In the body, include a script element that contains the JavaScript code for the clock.

3. Inside the script element, define a function called updateClock() that will be responsible for updating the clock display.

4. Inside the updateClock() function, create a new Date object and assign it to a variable called now. This object will represent the current date and time.

5. Use the getHours(), getMinutes(), and getSeconds() methods of the Date object to retrieve the current hours, minutes, and seconds, and assign them to variables.

6. Use conditional statements to check if the hours, minutes, or seconds are less than 10. If they are, add a leading zero to the value.

7. Concatenate the hours, minutes, and seconds variables into a string in the format "HH:MM:SS", and assign it to a variable called clockStr.

8. Use the document.getElementById() method to get a reference to the "clock" element, and use the textContent property to set its text content to the clockStr variable.

9. Use the setInterval() function to call the updateClock() function every 1 second (1000 milliseconds).

HTML:


<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Clock></title>
     <style>
     body {
          text-align: center;
          font-size: 60px;
          background-color: #333;
          color: white;
          font-family: sans-serif;
     }
     </style>
</head>
<body>
     <div id="clock"></div>
     <script>
     function updateClock() {
          // Get 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 the hours, minutes, and seconds
          if (hours < 10) {
          hours = "0" + hours;
          }
          if (minutes < 10) {
          minutes = "0" + minutes;
          }
          if (seconds < 10) {
          seconds = "0" + seconds;
          }

          // Build the clock display string
          var clockStr = hours + ":" + minutes + ":" + seconds;

          // Set the text of the clock element to the clock display string
          document.getElementById("clock").textContent = clockStr;
     }

     // Update the clock every 1 second
     setInterval(updateClock, 1000);
     </script>
</body>
</html>

You can improve this project in your own version.

We are ready to release more projects please support us by sharing and visiting webdevmonk