Create a Real-Time Digital Clock Using JavaScript: A Simple Animated Clock Tutorial

javascript

Next →

Last updated: 15th July 2025

In this tutorial, you'll learn how to build a sleek, animated digital clock using pure JavaScript, HTML, and CSS. Since JavaScript runs directly in the browser, this clock will display the current time based on the user's local machine, making it a client-side solution that requires "no server-side code". Whether you're new to web development or looking for a fun project, this easy step-by-step guide will help you design a fully functional digital clock with smooth updates every second.

Real time clock... 👇

Note: JavaScript should be enabled on the browser for this script to function.

⏰ Do you know you can design a simple Analog clock using Canvas and JavaScript? Check this out.

The Markup and CSS
<html>
<head>
  <title>Digital Clock using JavaScript</title>
  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css"/>

  <style>
    .tabBlock {
      background-color: #57574f;
      border: solid 0px #FFA54F;
      border-radius: 5px;
      max-width: 200px;
      width: 100%;
      overflow: hidden;
      display: block;
    }
    .clock {
      font-size: 40px;
      padding: 0 10px;
    }
    .clocklg {
      font-size: 20px;
    }
    .clock, .clocklg {
      font-family: Orbitron, sans-serif;
      font-weight: normal;
      vertical-align: middle;
      color: #fff;
    }
  </style>
</head>
<body>
  <div style="background-color:#F3F3F3;max-width:220px;width:100%;margin:0 auto;padding:20px;">

    <table class="tabBlock" align="center" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td class="clock" id="dc"></td> <!-- The clock -->
        <td>
          <table cellpadding="0" cellspacing="0" border="0">
            <tr><td class="clocklg" id="dc_hour"></td></tr>   <!-- Hour in 'AM' AND 'PM' -->
            <tr><td class="clocklg" id="dc_second"></td></tr>   <!-- Show seconds -->
          </table>
        </td>
      </tr>
    </table>

  </div>
</body>

The Script

<script>
  let digitized = () => {
    const now = new Date(); // For current system date and time.
    
    let hrs = now.getHours();
    let min = now.getMinutes();
    let sec = now.getSeconds();

    min = Ticking(min);
    sec = Ticking(sec);

    document.getElementById('dc').innerHTML = hrs + ":" + min;
    document.getElementById('dc_second').innerHTML = sec;
    
    let period = 'AM';
    if (hrs >= 12) {
      period = 'PM';
      if (hrs > 12) {
        hrs -= 12;
      }
    }
    if (hrs === 0) {
      hrs = 12; // Show midnight as 12, not 0.
    }
    document.getElementById('dc_hour').innerHTML = period;
  }

  function Ticking(ticVal) {
    if (ticVal < 10) {
      ticVal = "0" + ticVal;
    }
    return ticVal;
  }
  
  digitized();
  setInterval(digitized, 1000);
</script>
</html>
Try it

How the Clock Works?

Continuous Time Update

digitized() is the main function that,
• Fetches the current time
• Formats it
• Updates HTML elements to show the time

setInterval(digitized, 1000) tells the browser to call digitized() every second (1000 milliseconds), so the clock updates in real time.

⌚ Reads Current Time

This line creates a new Date object representing the exact moment it was called.

const now = new Date();

⏰ Extracting Hours, Minutes, and Seconds

These give you the current hour (0–23), minute, and second.

let hrs = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();

Related example: How to Create a Simple Analog Clock using HTML5 canvas and JavaScript?

Formatting with Leading Zeros

This helper function adds a "0" in front of single digit minutes or seconds, so "5" becomes "05".

min = Ticking(min);
sec = Ticking(sec);

function Ticking(ticVal) {
  if (ticVal < 10) {
    ticVal = "0" + ticVal;
  }
  return ticVal;
}

Converting to 12-Hour Format with AM/PM

let period = 'AM';
if (hrs >= 12) {
  period = 'PM';
  if (hrs > 12) {
    hrs -= 12;
  }
}
if (hrs === 0) {
  hrs = 12;
}

Next →