Building a digital clock using JavaScript is a great way to learn more about the language and how to create dynamic, interactive elements for your website or web application. In this tutorial, we will go over the steps for creating a simple digital clock using JavaScript, HTML, and CSS.

Building a digital clock using JavaScript is simple for both advanced and beginners. This article will cater to you if you are learning JavaScript and are practicing it by building a digital clock or you want to just implement it on your website.

In this article, we will build a 12-hour clock and a 24-hour clock. We will use the date object to get time every second and then update the function each second.

Digital Clock using JavaScript

To start, we will need to create an HTML page and add an <div> element where the clock will be displayed. This element should have a unique id, such as “clock”, so you can access it in your JavaScript code.

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

Next, create a JavaScript function that will be responsible for updating the clock. This function should use the Date object to get the current time and then update the innerHTML of the clock <div> with the formatted time.

To do this, you will first need to create variables for the current hours, minutes, and seconds. You can get these values using the Date object’s getHours(), getMinutes(), and getSeconds() methods.

Next, you will need to format these values into a string that will be displayed on the clock. This can be done using string concatenation and conditional statements to add leading zeros to single-digit values.

Once you have the formatted time string, you can use the innerHTML property of the clock <div> to set its value to the current time. This will update the clock display whenever the function is called.

This clock shows time taking account of the user’s time zone.

12-Hour Clock Code

First, we need an HTML container to set a location where the time will be displayed on the webpage.

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

Explanation: We have used 'div' as a container, this will help us display the clock as a separate block on the webpage. We can use 'span' if we want to use it inline. This also sets the potion where the clock will be displayed.

Now we can add a bit of CSS to beautify the clock. We will set a background, and border, align it to the center, and a little padding, font size, and color.

#clock {
    font-size: 24px;
    color: #fff;
    text-align: center;
    background: #111;
    padding: 18px 16px;
    border: 1px solid #ddd;
}

Now let's do the JavaScript magic using functions and some basic objects.

<script>
function clock () {
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
let ampm = 'AM';

if(h > 12){
      h = h - 12;
      ampm = "PM";
   }

if (h == 0) {
h = 12;
}

h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
    
   let time = h + ":" + m + ":" + s + " " + ampm;
document.getElementById("clock").innerText = time; 
  let t = setInterval(clock, 1000);;
}
clock();
</script>

Javascript explanation 12 hours

The first thing we do is create a function using the following code " function clock () {code inside}".

A function is defined using the function keyword, followed by a name that describes what the function does, and a set of parentheses () that may include parameters. The code to be executed when the function is called is placed within curly braces {}.

Understanding the code inside the curly brackets:

let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();

The 'let' command is used to declare a variable in JavaScript (can read about let more here). We used the date as our variable name, which can be anything you like, followed by the 'new Date()' object which is used to create a new date object with the current date and time.

In the Date article, you can find getHours, getMinutes, and getSeconds methods which help us extract Hours, Minutes, and Seconds from the date variable and assign them to new variables h, m, and s respectively.

Now let's create a new variable ampm to show 'AM' before 12 noon and 'PM' after that.

let ampm = 'AM';
if(h > 12){
      h = h - 12;
      ampm = "PM";
   }

if (h == 0) {
h = 12;
}

Second, if statements help in converting time into 12 hours format.

We now need to format the values of the hour, minute, and second so that it displays time in a consistent way (03:30:09 AM and not 3:30:9 AM ).

h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;

Now we need to assign all the variables to a new variable, which we will call 'time'. The wee will pass this time variable to the HTML using 'document.getElementById("clock").innerText = time;'.

let time = h + ":" + m + ":" + s + " " + ampm;
document.getElementById("clock").innerText = time; 
  let t = setInterval(clock, 1000);;
}
clock();

Variable 't' helps us update the time every 1000 milliseconds (1 second) and at last, we call our clock function.

24-Hour Clock Code