Building a Dynamic Digital Clock with JavaScript

The digital clock is an alternative to a traditional analogue clock. This type of clock shows numbers to display the time in a digital format, such as on a watch, phone or an alarm clock.

In this article I have created a digital clock using JavaScript code and shared it with you.

To create a digital clock with JavaScript, you will need to use the Date object to get the current time and update the clock display regularly. Here is an example of a basic digital clock that displays the current time in the format of hours:minutes:seconds:

Source Code - Model 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h2>Digital Clock in JavaScript</h2>
  <div class="frame">
    <div class="clock">12 : 10 : 58 AM</div>
  </div>
 

  <script src="js/script.js"></script>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

@font-face {
  font-family:digital-7;
  src: url('digital-7.ttf');
}

:root{
  --light-color:#FFC312;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  height: 100vh;
  width: 100vw;
  background-color: #2C3A47;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  gap: 50px;
}

h2{
  color:#f9ca24;
  font-size: 50px;
  font-weight: 500;
}

.frame{
  width: 600px;
  height: 300px;
  background-color: #111;
  border: 50px solid #f9ca24;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  font-size:80px;
  text-align: center;
  line-height: 180px;
}

.clock{
  font-family:digital-7;
  color:white;
  text-shadow: 0 0 20px var(--light-color);
  position: relative;
}
.clock::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background-color:var(--light-color);
  width: 100%;
  height: 100%;
  opacity: 0.1;
  filter: blur(40px);
}

The below code is a JavaScript script that creates a digital clock that displays the current time with AM/PM. It uses the HTML Document Object Model (DOM) to select and manipulate the elements on the webpage that display the clock information.

The script starts by defining a variable clock that selects a specific element on the webpage using the querySelector() function. This element will be used as the container for the clock.

The script then defines the runClock() function which is used to update the clock display every second. The function starts by creating a new Date object, which holds the current date and time information. It then uses the getHours(), getMinutes(), and getSeconds() methods of the Date object to retrieve the current hour, minutes, and seconds respectively.

The code then uses several if and else statements to format the time information and to add AM/PM in the clock. The function uses innerHTML property to update the clock's elements on the webpage, with the time information.

The script then uses setInterval() function to call the runClock() function every 1000 milliseconds (or 1 second), which updates the clock display on the webpage every second.

Then it calls the runClock() function once to ensure that the clock is showing the current time as soon as the page loads.

js/script.js

const clock=document.querySelector('.clock');
function runClock(){
    var time=new Date();
    var hrs=time.getHours();
    var min=time.getMinutes();
    var sec=time.getSeconds();
    var txt="AM";
    if(hrs>12){
        hrs=hrs-12;
        txt="PM";
    }else if(hrs==0){
        hrs=12;
        txt="AM";
    }
    hrs=hrs<10?'0'+hrs:hrs;
    min=min<10?'0'+min:min;
    sec=sec<10?'0'+sec:sec;

    clock.innerHTML=`${hrs} : ${min} : ${sec} ${txt}
    `;
//----------------------------------------------
/*
const h=document.querySelectorAll('.h');
const m=document.querySelectorAll('.m');
const s=document.querySelectorAll('.s');

hrs=hrs.toString();
h[0].innerHTML=hrs[0];
h[1].innerHTML=hrs[1];
min=min.toString();
m[0].innerHTML=min[0];
m[1].innerHTML=min[1];
sec=sec.toString();
s[0].innerHTML=sec[0];
s[1].innerHTML=sec[1];

*/
}
runClock();
setInterval(runClock,1000);

Output

Live Preview

Source Code - Model 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style2.css">
</head>
<body>
  <h2>Digital Clock in JavaScript</h2>

    <div class="clock">
        <div class="h"></div>
        <div class="h"></div>
        <div>:</div>
        <div class="m">0</div>
        <div class="m">0</div>
        <div>:</div>
        <div class="s">0</div>
        <div class="s">0</div>
        <div class="txt">PM</div>
    </div>


  <script src="js/script2.js"></script>
</body>
</html>

css/style2.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

@font-face {
  font-family:digital-7;
  src: url('digital-7.ttf');
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  height: 100vh;
  width: 100vw;
  background-color: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  color:white;
}

.clock{
width: 300px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.clock div{
  font-family:digital-7;
  font-size:50px;
  width: 40px;
  text-align: center;
}

.txt{
  margin-left: 10px;
}

.h::before
,.m::before,
.s::before{
  content: '8';
  color:rgba(255,255,255,0.1);
  position: absolute;
}

js/script2.js

const clock=document.querySelector('.clock');
function runClock(){
    var time=new Date();
    var hrs=time.getHours();
    var min=time.getMinutes();
    var sec=time.getSeconds();
    var txt="AM";
    if(hrs>12){
        hrs=hrs-12;
        txt="PM";
    }else if(hrs==0){
        hrs=12;
        txt="AM";
    }
    hrs=hrs<10?'0'+hrs:hrs;
    min=min<10?'0'+min:min;
    sec=sec<10?'0'+sec:sec;


const h=document.querySelectorAll('.h');
const m=document.querySelectorAll('.m');
const s=document.querySelectorAll('.s');

hrs=hrs.toString();
h[0].innerHTML=hrs[0];
h[1].innerHTML=hrs[1];
min=min.toString();
m[0].innerHTML=min[0];
m[1].innerHTML=min[1];
sec=sec.toString();
s[0].innerHTML=sec[0];
s[1].innerHTML=sec[1];


}
runClock();
setInterval(runClock,1000);

Output

Live Preview