Create a digital clock in javascript

We will learn how to create a digital clock in javascript.

It will output the current time like this.

10:57:23
10:57:24
10:57:25
10:57:26
10:57:27

We will use the the Date function to create our clock.

Date function returns the single moment in time in a platform independent format. We can use it to get the milliseconds value in time.

There are different methods available with Date function which we will be using to create our clock.

getHours():- This method returns the hours of date in 24hrs number format like (0 – 23).

getMinutes():- This will return the minutes of the hours in number format like from (0 – 59).

getSeconds():- This method returns the seconds of the minutes in number format like (0 – 59).

getMilliseconds():- This method returns the milliseconds of the seconds in number format like (0 – 999);

We will create a function which will be using this methods to get the current time in HH:MM:SS format.

const clock = () => {
    const time = new Date(),
    hours = time.getHours(),
    minutes = time.getMinutes(),
    seconds = time.getSeconds();
  return pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
}

We are using this pad() helper function which will format the input by appending 0 if number is single digit like 01.

const pad = (inp) => {
  return String(inp).length == 1 ? '0' + inp : inp;
}

Now when we call the clock function it will return the single instance of time at the moment it was called.

const pad = (inp) => {
  return String(inp).length == 1 ? '0' + inp : inp;
}

const clock = () => {
    const time = new Date(),
    hours = time.getHours(),
    minutes = time.getMinutes(),
    seconds = time.getSeconds();
  return pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
}

console.log(clock());
//10:59:23

But to make it work like a clock we will need to call this function repeatedly after 1 second. For this we will use the setInterval function which repeatedly calls the function after given interval of time. The interval time is provided in milliseconds.

setInterval(function() {
  console.log(clock());
}, 1000);

//10:59:23
//10:59:24
//10:59:25
//10:59:26
.
.
.

We can also use the getMilliseconds() method to make the clock show the milliseconds as well. But for this we will need to call the setInterval at 1 millisecond.

const pad = (inp) => {
  return String(inp).length == 1 ? '0' + inp : inp;
}

const clock = () => {
    const time = new Date(),
    hours = time.getHours(),
    minutes = time.getMinutes(),
    seconds = time.getSeconds(),
    milliseconds = time.getMilliseconds();
  return pad(hours) + ':' + pad(minutes) + ':' + pad(seconds) + ':' + pad(milliseconds) ;
}

setInterval(function() {
   console.log(clock());
}, 1);


//10:59:23:235
//10:59:24:236
//10:59:25:237
//10:59:26:238
.
.
.

---

12HR clock in javascript

In order to create 12HR clock we just need to get the MOD of the hours value.

const pad = (inp) => {
  return String(inp).length == 1 ? '0' + inp : inp;
}

const clock = () => {
    const time = new Date(),
    hours = time.getHours(),
    minutes = time.getMinutes(),
    seconds = time.getSeconds(),
    milliseconds = time.getMilliseconds();
  return pad(hours % 12) + ':' + pad(minutes) + ':' + pad(seconds) + ':' + pad(milliseconds) ;
}

setInterval(function() {
   console.log(clock());
}, 1);

//02:59:23:235
//02:59:24:236
//02:59:25:237
//02:59:26:238
.
.
.