Header Ads

How to create a digital Clock While using HTML and CSS

January 17, 2024




Kechfix has provided the codes for making a digital clock

You can copy codes and paste them

                                                            Click here

<!DOCTYPE html>

<html>

<head>

  <title>Digital Clock</title>

<style>

.clock {

  font-family: Arial, sans-serif;

  font-size: 48px;

  text-align: center;

  margin-top: 50px;

}

                                                            Click Here

#time {

  color: #333;

}

</style>

</head>

<body>

  <div class="clock">

    <div id="time"></div>

  </div>

function updateTime() {

  var currentTime = new Date();

  var hours = currentTime.getHours();

  var minutes = currentTime.getMinutes();

  var seconds = currentTime.getSeconds();


  // Add leading zeros if the time component is less than 10

  hours = (hours < 10 ? "0" : "") + hours;

  minutes = (minutes < 10 ? "0" : "") + minutes;

  seconds = (seconds < 10 ? "0" : "") + seconds;


  var timeString = hours + ":" + minutes + ":" + seconds;

  document.getElementById("time").innerText = timeString;

}

                                                      Click Here

// Update the time every second

setInterval(updateTime, 1000);

</body>

</html>

If this was helpful subscribe to our channel 

SUBSCRIBE


Post a Comment

No comments

Subscribe to: Post Comments ( Atom )