The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a real-time clock display

Written by

Bernardo Palos

in

Here’s a simple HTML, CSS, and JavaScript implementation of a real-time clock display. You can run this code in any modern browser.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Real-Time Clock</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #121212;
      font-family: Arial, sans-serif;
      color: #ffffff;
      margin: 0;
    }

    .clock {
      font-size: 4rem;
      background: #1e1e1e;
      padding: 30px 50px;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }
  </style>
</head>
<body>
  <div class="clock" id="clock">00:00:00</div>

  <script>
    function updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const timeString = `${hours}:${minutes}:${seconds}`;
      document.getElementById('clock').textContent = timeString;
    }

    setInterval(updateClock, 1000);
    updateClock(); // initial call to avoid 1-second delay
  </script>
</body>
</html>

Features:

  • Real-time update every second using setInterval.

  • Styled using dark theme with a glowing box-shadow.

  • Uses padStart to maintain two-digit formatting.

You can embed this directly into any webpage or develop it further into a widget.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About