Analog Clock with PHP & CSS

Overview

Create a stunning analog clock that displays the current time with smoothly rotating hour, minute, and second hands — all rendered with pure CSS and powered by PHP.

Project Structure

text

analog-clock/
├── index.php
├── css/
│   └── clock.css
└── js/
    └── clock.js

The Clock Face (index.php)

php

<?php
date_default_timezone_set('America/New_York');
$hours = date('G');
$minutes = date('i');
$seconds = date('s');

$hourDeg   = ($hours % 12) * 30 + $minutes * 0.5;
$minuteDeg = $minutes * 6;
$secondDeg = $seconds * 6;
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Analog Clock</title>
  <link rel="stylesheet" href="css/clock.css">
</head>
<body>
  <div class="clock">
    <div class="hand hour" style="transform: rotate(<?= $hourDeg ?>deg)"></div>
    <div class="hand minute" style="transform: rotate(<?= $minuteDeg ?>deg)"></div>
    <div class="hand second" style="transform: rotate(<?= $secondDeg ?>deg)"></div>
    <div class="center-dot"></div>
    <?php for ($i = 1; $i <= 12; $i++): ?>
      <div class="number n<?= $i ?>"><?= $i ?></div>
    <?php endfor; ?>
  </div>
  <script src="js/clock.js"></script>
</body>
</html>

Clock Styles (css/clock.css)

css

* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            display: flex; justify-content: center; align-items: center;
            min-height: 100vh; background: #1a1a2e;
        }
        .clock-wrapper {
            display: flex; justify-content: center; align-items: center;
            width: 100%; min-height: 80vh;
        }
        .clock {
            width: 300px; height: 300px; border-radius: 50%;
            background: #16213e; border: 8px solid #0f3460;
            position: relative; box-shadow: 0 0 40px rgba(15,52,96,0.6);
        }
        .hand {
            position: absolute; bottom: 50%; left: 50%;
            transform-origin: bottom center; border-radius: 4px;
        }
        .hand.hour   { width: 6px; height: 70px; background: #e94560; margin-left: -3px; }
        .hand.minute { width: 4px; height: 100px; background: #fff; margin-left: -2px; }
        .hand.second { width: 2px; height: 110px; background: #53d8fb; margin-left: -1px; }
        .center-dot {
            width: 14px; height: 14px; background: #e94560; border-radius: 50%;
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            z-index: 10;
        }
        .number {
            position: absolute;
            width: 30px; height: 30px;
            text-align: center; line-height: 30px;
            font-size: 18px; font-weight: bold;
            color: #e0e0e0; font-family: 'Segoe UI', Arial, sans-serif;
        }
        .n1  { top: 15%;  left: 65%; }
        .n2  { top: 28%;  left: 78%; }
        .n3  { top: 45%;  left: 82%; }
        .n4  { top: 62%;  left: 78%; }
        .n5  { top: 75%;  left: 65%; }
        .n6  { top: 80%;  left: 45%; }
        .n7  { top: 75%;  left: 25%; }
        .n8  { top: 62%;  left: 12%; }
        .n9  { top: 45%;  left: 8%;  }
        .n10 { top: 28%;  left: 12%; }
        .n11 { top: 15%;  left: 25%; }
        .n12 { top: 8%;   left: 45%; }

Live Update (js/clock.js)

javascript

function updateClock() {
  const now = new Date();
  const h = now.getHours() % 12;
  const m = now.getMinutes();
  const s = now.getSeconds();
  document.querySelector('.hour').style.transform   = `rotate(${h * 30 + m * 0.5}deg)`;
  document.querySelector('.minute').style.transform = `rotate(${m * 6}deg)`;
  document.querySelector('.second').style.transform = `rotate(${s * 6}deg)`;
}
setInterval(updateClock, 1000);
updateClock();

Technologies

- PHP — server-side time calculation - CSS — clock face, hands, and positioning - JavaScript — real-time hand updates

Overview

Project Structure

The Clock Face (index.php)

Clock Styles (css/clock.css)

Live Update (js/clock.js)

Technologies

Related Projects

Animated Loading Spinners Gallery in PHP

PHP Color Palette Generator

PHP Typing Speed Test

Comments (0)

Leave a Comment