Digital Clock

A sleek, modern digital clock with date and seconds display. Uses CSS glassmorphism and real-time updates.

vanilla-js css react tailwind vue svelte

目标: TS JS HTML React Vue Svelte

代码

:root {
  --clock-bg: rgba(255, 255, 255, 0.05);
  --clock-blur: 15px;
  --clock-border: rgba(255, 255, 255, 0.1);
  --clock-text: #ffffff;
  --clock-accent: #00d2ff;
  --clock-font: "Inter", system-ui, -apple-system, sans-serif;
  --body-bg: #0f172a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--clock-font);
  background: var(--body-bg);
  color: var(--clock-text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.clock-widget {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock-display {
  width: 100%;
  background: var(--clock-bg);
  backdrop-filter: blur(var(--clock-blur));
  -webkit-backdrop-filter: blur(var(--clock-blur));
  border: 1px solid var(--clock-border);
  border-radius: 24px;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.3s ease;
}

.clock-display:hover {
  transform: scale(1.02);
}

.time-container {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--clock-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#hours,
#minutes {
  font-size: clamp(2.5rem, 12vw, 4.5rem);
}

.separator {
  font-size: clamp(2rem, 10vw, 4rem);
  margin: 0 0.1em;
  opacity: 0.5;
  animation: blink 1s infinite;
}

.separator-small {
  font-size: clamp(1.2rem, 5vw, 2.5rem);
  margin: 0 0.05em;
  opacity: 0.3;
}

#seconds {
  font-size: clamp(1.2rem, 5vw, 2.5rem);
  color: var(--clock-accent);
  min-width: 1.1em;
}

.ampm {
  font-size: clamp(0.9rem, 3vw, 1.4rem);
  margin-left: 0.3em;
  font-weight: 600;
  opacity: 0.8;
  color: var(--clock-accent);
}

.date-display {
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  color: var(--clock-text);
  opacity: 0.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.1;
  }
}

/* ── Mobile Optimization ───────────────────── */
@media (max-width: 480px) {
  .clock-display {
    padding: 1.25rem;
  }
  .date-display {
    letter-spacing: 0.04em;
  }
}

function updateClock() {
  const now = new Date();

  // Format Time
  let hours = now.getHours();
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  const ampm = hours >= 12 ? "PM" : "AM";

  // Convert to 12-hour format
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  const hoursStr = String(hours).padStart(2, "0");

  // Update DOM
  const hoursEl = document.getElementById("hours");
  const minutesEl = document.getElementById("minutes");
  const secondsEl = document.getElementById("seconds");
  const ampmEl = document.getElementById("ampm");
  const dateEl = document.getElementById("date");

  if (hoursEl) hoursEl.textContent = hoursStr;
  if (minutesEl) minutesEl.textContent = minutes;
  if (secondsEl) secondsEl.textContent = seconds;
  if (ampmEl) ampmEl.textContent = ampm;

  // Format Date
  const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
  if (dateEl) {
    dateEl.textContent = now.toLocaleDateString(undefined, options);
  }
}

// Initial call
updateClock();

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

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Digital Clock</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="clock-widget">
    <div class="clock-display">
      <div class="time-container">
        <span id="hours">00</span>
        <span class="separator">:</span>
        <span id="minutes">00</span>
        <span class="separator-small">:</span>
        <span id="seconds" class="seconds">00</span>
        <span id="ampm" class="ampm">AM</span>
      </div>
      <div id="date" class="date-display">Monday, January 01, 2024</div>
    </div>
  </div>

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

</html>

import { useState, useEffect } from "react";

export default function DigitalClockRC() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const hours = time.getHours();
  const minutes = String(time.getMinutes()).padStart(2, "0");
  const seconds = String(time.getSeconds()).padStart(2, "0");
  const ampm = hours >= 12 ? "PM" : "AM";
  const h12 = String(hours % 12 || 12).padStart(2, "0");
  const dateStr = time.toLocaleDateString(undefined, {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return (
    <div className="min-h-screen bg-[#0d1117] flex items-center justify-center p-6">
      <div className="bg-white/5 backdrop-blur border border-white/10 rounded-2xl px-10 py-8 text-center shadow-2xl">
        <div className="flex items-end justify-center gap-1 mb-2">
          <span className="text-[72px] font-mono font-bold text-[#e6edf3] leading-none tabular-nums">
            {h12}:{minutes}
          </span>
          <div className="flex flex-col items-start mb-2 gap-1">
            <span className="text-[28px] font-mono font-semibold text-[#58a6ff] leading-none tabular-nums">
              {seconds}
            </span>
            <span className="text-[14px] font-mono font-bold text-[#8b949e] leading-none">
              {ampm}
            </span>
          </div>
        </div>
        <p className="text-[14px] text-[#8b949e] tracking-wide">{dateStr}</p>
      </div>
    </div>
  );
}

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

const time = ref(new Date());
let interval;

const hours = computed(() => time.value.getHours());
const minutes = computed(() => String(time.value.getMinutes()).padStart(2, "0"));
const seconds = computed(() => String(time.value.getSeconds()).padStart(2, "0"));
const ampm = computed(() => (hours.value >= 12 ? "PM" : "AM"));
const h12 = computed(() => String(hours.value % 12 || 12).padStart(2, "0"));
const dateStr = computed(() =>
  time.value.toLocaleDateString(undefined, {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  })
);

onMounted(() => {
  interval = setInterval(() => {
    time.value = new Date();
  }, 1000);
});

onUnmounted(() => {
  clearInterval(interval);
});
</script>

<template>
  <div class="min-h-screen bg-[#0d1117] flex items-center justify-center p-6">
    <div class="bg-white/5 backdrop-blur border border-white/10 rounded-2xl px-10 py-8 text-center shadow-2xl">
      <div class="flex items-end justify-center gap-1 mb-2">
        <span class="text-[72px] font-mono font-bold text-[#e6edf3] leading-none tabular-nums">
          {{ h12 }}:{{ minutes }}
        </span>
        <div class="flex flex-col items-start mb-2 gap-1">
          <span class="text-[28px] font-mono font-semibold text-[#58a6ff] leading-none tabular-nums">
            {{ seconds }}
          </span>
          <span class="text-[14px] font-mono font-bold text-[#8b949e] leading-none">
            {{ ampm }}
          </span>
        </div>
      </div>
      <p class="text-[14px] text-[#8b949e] tracking-wide">{{ dateStr }}</p>
    </div>
  </div>
</template>

<script>
import { onMount, onDestroy } from "svelte";

let time = new Date();
let interval;

$: hours = time.getHours();
$: minutes = String(time.getMinutes()).padStart(2, "0");
$: seconds = String(time.getSeconds()).padStart(2, "0");
$: ampm = hours >= 12 ? "PM" : "AM";
$: h12 = String(hours % 12 || 12).padStart(2, "0");
$: dateStr = time.toLocaleDateString(undefined, {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
});

onMount(() => {
  interval = setInterval(() => {
    time = new Date();
  }, 1000);
});

onDestroy(() => {
  clearInterval(interval);
});
</script>

<div class="min-h-screen bg-[#0d1117] flex items-center justify-center p-6">
  <div class="bg-white/5 backdrop-blur border border-white/10 rounded-2xl px-10 py-8 text-center shadow-2xl">
    <div class="flex items-end justify-center gap-1 mb-2">
      <span class="text-[72px] font-mono font-bold text-[#e6edf3] leading-none tabular-nums">
        {h12}:{minutes}
      </span>
      <div class="flex flex-col items-start mb-2 gap-1">
        <span class="text-[28px] font-mono font-semibold text-[#58a6ff] leading-none tabular-nums">
          {seconds}
        </span>
        <span class="text-[14px] font-mono font-bold text-[#8b949e] leading-none">
          {ampm}
        </span>
      </div>
    </div>
    <p class="text-[14px] text-[#8b949e] tracking-wide">{dateStr}</p>
  </div>
</div>

Digital Clock

A highly aesthetic digital clock component featuring:

Real-time updates (hours, minutes, seconds)
Current date and day of the week
Glassmorphism design
Responsive layout

Implementation

The clock uses the Intl.DateTimeFormat API for localized date and time formatting. The UI is built using CSS Grid and Flexbox for perfect centering and responsiveness.