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

12 Hour Clock

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

<div id="clock" class="tocg" 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 in a 12-hour format and also takes account of the user’s time zone.

24 Hour Clock

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 == 0) {
h = 12;
}
if(h > 12){
      h = h - 12;
      ampm = "PM";
   }
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 " function clock () {code inside}". A function is a keyword we use to create a function in JavaScript followed by the function name (we have given our function name clock, but you can give it any name).

Understanding the code inside the curly brackets:

let date = new Date();

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.

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

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.