How to Create a Digital Clock Using JavaScript

In this tutorial, we will learn how to create a digital clock using JavaScript.
By the end of this tutorial, you will be able to display the current time in hours, minutes, seconds, and sessions, updating in real-time.
Let’s get started!

Create a Digital Clock Using JavaScript

Now let’s start with code and detailed explanation. Here below code is your JavaScript file code.

function showTime(){
    //  code for showing time
}

We have to create one function called ‘showTime()’ that will handle the logic for displaying the time. Now, the rest of the code is inside this function.

var date = new Date();

Now, I create a new ‘Date’ object to get the current date and time.

var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";

Additionally, we have to create variables for hours, minutes, seconds, and sessions. And we have to get the current hours, minutes, and seconds from the ‘Date’ object.
initially, Initializes a variable ‘session’ to store whether the time is AM or PM.

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

If the hour is ‘0’ (midnight), it is converted to ’12’ to represent ’12 AM’.

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

If the hour is greater than 12, it subtracts 12 from the hour in order to convert it to a 12-hour format and sets the session to ‘PM’.

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

Now, we have to check for a single-digit number; therefore, we add a leading zero to the hour, minute, and second, if there is a single-digit number (less than 10).

var time = h + ":" + m + ":" + s + " " + session;

For display time we make one variable ‘time’. We have to concatenate the hour, minute, and second in this time variable with colons and add the session.

document.getElementById("DigitalClock").innerText = time;
document.getElementById("DigitalClock").textContent = time;

The first line will update the inner text of the HTML element with the id ‘DigitalClock’ to display the current time.
The second line will update the text content of the HTML element with the id ‘DigitalClock’ to display the current time. This is included for cross-browser compatibility.

setTimeout(showTime, 1000);

This line sets a timeout to call the ‘showTime’ function again after 1000 milliseconds (1 second), ensuring the clock updates every second.

showTime();

After closing the above function calls the ‘showTime()’ function to start the clock as soon as the script runs.

So this is your JavaScript code for displaying time in a digital clock.
Now let’s discuss our HTML and CSS code. In your HTML code, we must declare one div with the id ‘DigitalClock’ and the class name ‘clock’. Also, do not forget to provide a link for the external JavaScript file. And in your CSS file, give style according to your choice.

Output:

Now let’s focus on output:

https://drive.google.com/file/d/1LNF_kjUbsLHJRKu3xfBgPicEuNBVN5dj/view?usp=drive_link

In the above link, you can see the video of a digital clock. Therefore, you can easily build a Digital clock using JavaScript by understanding this tutorial.

Create a Digital Clock Using JavaScript

Output:

Related Posts

Leave a Comment Cancel Reply