How to make a clock in JavaScript

Learn how to use JavaScript to create a clock, from a simple clock to a complex interface with interactive elements.

Creating a Clock in JavaScript

JavaScript can be used to create a real-time clock that displays the current time on a web page. This can be done by creating a JavaScript function that uses the Date object to get the current time, and then updating the HTML elements on the page to display the time. The following example shows how to do this:

function updateClock() {
  // Get the current time
  var now = new Date();
  
  // Get the hours, minutes and seconds
  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;
  }
  
  // Create the time string
  var timeString = hours + ":" + minutes + ":" + seconds;
  
  // Update the HTML elements with the new time
  document.getElementById("clock").innerHTML = timeString;
}

// Call the function every second
setInterval(updateClock, 1000);

The updateClock() function starts by getting the current time using the Date object. It then extracts the hours, minutes, and seconds and formats them to add a leading zero if needed. The hours, minutes, and seconds are then combined into a string and assigned to the HTML element with the "clock" ID. The setInterval() function is then used to call the updateClock() function every second.

The HTML element that will display the clock needs to have an ID assigned to it. For example:

Now when the page loads, the clock will be displayed and will be updated every second. This can be used to create a real-time clock that updates the time automatically.