How to Make Analog Clock with HTML, CSS, and JavaScript

Simple Clock
12
3
6
9

The structure and the essentials

  • We need second , minute and hour hand,
  • second hand will circle through 360 degree every minute that means in every second it will move 6 degree
  • Minute hand moves 6 degree in every minute
  • And the hour hand moves 30 degree every hour

So we just add this logic in the clock that's it.

We get the time from browser


const now = new Date();

const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

Then access the clock hand from JavaScript


const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const secondHand = document.getElementById('second-hand');

Update the position based on the current time


const hourDeg = (hours % 12) * 30 + minutes / 2;
const minuteDeg = minutes * 6;
const secondDeg = seconds * 6;

hourHand.style.transform = `rotate(${hourDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
secondHand.style.transform = `rotate(${secondDeg}deg)`;

Add everything in a function also set interval of 1 second to update the clock every second


function updateClock() {
  const now = new Date();
  
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  // Analog clock
  const hourHand = document.getElementById('hour-hand');
  const minuteHand = document.getElementById('minute-hand');
  const secondHand = document.getElementById('second-hand');

  const hourDeg = (hours % 12) * 30 + minutes / 2;
  const minuteDeg = minutes * 6;
  const secondDeg = seconds * 6;

  hourHand.style.transform = `rotate(${hourDeg}deg)`;
  minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
  secondHand.style.transform = `rotate(${secondDeg}deg)`;

  // Digital clock
  const digitalClock = document.getElementById('digital-clock');
  digitalClock.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// Update the clock every second
setInterval(updateClock, 1000);

// Initial call to set the clock right away
updateClock();

The complete code


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Clock</title>
  <style>
    body {
      background-color: rgb(139, 126, 126);
    }
    .clock-container {
      color:#fffbe4;
      background-color: rgb(105, 96, 96);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: Arial, sans-serif;
    }

    #analog-clock {
      border: 10px solid transparent;
      border-image: linear-gradient(to right, #b59d72, #ffe79a) 1;
      box-shadow: inset -1px 0px 12px 9px rgba(0, 0, 0, 0.5); 
      width: 300px;
      height: 300px;
      position: relative;
    }

    .clock-hand {
      box-shadow: 0 0 10px #00000080; 
      position: absolute;
      background:  linear-gradient(to right, #b59d72, #ffe79a);
      transform-origin: 50% 100%;
      width: 4px;
      top: 50%;
      left: 50%;
    }

    #hour-hand {
      height: 50px;
      margin-top: -50px;
    }

    #minute-hand {
      height: 70px;
      margin-top: -70px;
    }

    #second-hand {
      height: 80px;
      background:  linear-gradient(to right, #b59d72, #ffe79a);
      margin-top: -80px;
    }

    .hour-number-left-right {
      margin-top:-8px;
      position: absolute;
      font-size: 16px;
      font-weight: bold;
    }

    .hour-number-top-bottom {
      margin-left: -6px;
      position: absolute;
      font-size: 16px;
      font-weight: bold;
    }



    .hour-number {
      position: absolute;
      font-size: 16px;
      font-weight: bold;
    }

    .minute-dot {
      position: absolute;
      background-color: #333;
      width: 4px;
      height: 4px;
      border-radius: 50%;
    }

    #digital-clock {
      display: flex;
      position:absolute;
      margin-top:400px;
      font-size: 48px;
    }
  </style>
</head>
<body>
  <div class="clock-container">
    <div id="analog-clock">
      <!-- Clock Hands -->
      <div id="hour-hand" class="clock-hand"></div>
      <div id="minute-hand" class="clock-hand"></div>
      <div id="second-hand" class="clock-hand"></div>
      
      <!-- Hour Numbers -->
      <div class="hour-number-top-bottom" style="top: 10px; left: 50%;">12</div>
      <div class="hour-number-left-right" style="top: 50%; left: 95%;">3</div>
      <div class="hour-number-top-bottom" style="bottom: 10px; left: 50%;">6</div>
      <div class="hour-number-left-right" style="top: 50%; left: 5%;">9</div>

      <!-- Minute Dots -->
      <div class="minute-dot" style="top: 15%; left: 50%;"></div>
      <div class="minute-dot" style="top: 50%; left: 85%;"></div>
      <div class="minute-dot" style="bottom: 15%; left: 50%;"></div>
      <div class="minute-dot" style="top: 50%; left: 15%;"></div>
    </div>
    <div id="digital-clock"></div>
  </div>
  <script>
    function updateClock() {
      const now = new Date();
      
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      // Analog clock
      const hourHand = document.getElementById('hour-hand');
      const minuteHand = document.getElementById('minute-hand');
      const secondHand = document.getElementById('second-hand');

      const hourDeg = (hours % 12) * 30 + minutes / 2;
      const minuteDeg = minutes * 6;
      const secondDeg = seconds * 6;

      hourHand.style.transform = `rotate(${hourDeg}deg)`;
      minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
      secondHand.style.transform = `rotate(${secondDeg}deg)`;

      // Digital clock
      const digitalClock = document.getElementById('digital-clock');
      digitalClock.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    // Update the clock every second
    setInterval(updateClock, 1000);

    // Initial call to set the clock right away
    updateClock();
  </script>
</body>
</html>

Get the code from github
https://github.com/01one/analog-html-clock