Reloj de React hecho de componentes de relojes

704 codex

Abrir en el editor Publica tu código

Reloj de React hecho de componentes de relojes

Recomendado

20 December 2024

Un código de staticclass394

15 January 2025

Escalada de la torre circular

7 August 2025

Emoji SVG de ojos saltones con seguimiento de ratón

HTML

<html lang="en"><head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Clock made of clocks</title>
  <script>
  window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
  <div id="root"><div class="app"><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 855; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 900; --minute-angle: 630; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 990; --minute-angle: 810; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 990; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 630; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1260; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1575; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1440; --minute-angle: 1350; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2340; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2790; --minute-angle: 1530; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3015; --minute-angle: 2655; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2655; --minute-angle: 2295; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2790; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3015; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 4095; --minute-angle: 2655; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1575; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3960; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2340; --minute-angle: 2790; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2520; --minute-angle: 2430; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1620; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1350; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 6840; --minute-angle: 7020; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7200; --minute-angle: 14220; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 7290; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14040; --minute-angle: 13950; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14040; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14220; --minute-angle: 6930; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14310; --minute-angle: 14130; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 21240; --minute-angle: 20970; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 21060; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 21420; --minute-angle: 21150; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14310; --minute-angle: 7290; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 35190; --minute-angle: 28170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 27810; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 7020; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 7110; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 35190; --minute-angle: 13770; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 20880; --minute-angle: 27990; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 20880; --minute-angle: 21060; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 13680; --minute-angle: 13950; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 13680; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div></div></div>
  
    <script id="rendered-js" type="module">
import React, { useState, useEffect, useRef } from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";

const H = { h: 0, m: 180 },
V = { h: 270, m: 90 },
TL = { h: 180, m: 270 },
TR = { h: 0, m: 270 },
BL = { h: 180, m: 90 },
BR = { h: 0, m: 90 },
E = { h: 135, m: 135 };

const digits = [
[
BR, H, H, BL,
V, BR, BL, V,
V, V, V, V,
V, V, V, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, BL, E,
TR, BL, V, E,
E, V, V, E,
E, V, V, E,
BR, TL, TR, BL,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
BR, H, TL, V,
V, BR, H, TL,
V, TR, H, BL,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
E, BR, TL, V,
E, TR, BL, V,
BR, H, TL, V,
TR, H, H, TL],

[
BR, BL, BR, BL,
V, V, V, V,
V, TR, TL, V,
TR, H, BL, V,
E, E, V, V,
E, E, TR, TL],

[
BR, H, H, BL,
V, BR, H, TL,
V, TR, H, BL,
TR, H, BL, V,
BR, H, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
V, BR, H, TL,
V, TR, H, BL,
V, BR, BL, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
E, E, V, V,
E, E, V, V,
E, E, V, V,
E, E, TR, TL],

[
BR, H, H, BL,
V, BR, BL, V,
V, TR, TL, V,
V, BR, BL, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
V, BR, BL, V,
V, TR, TL, V,
TR, H, BL, V,
BR, H, TL, V,
TR, H, H, TL]];

const normalizeAngle = (next, prev) => {
  const delta = ((next - prev) % 360 + 360) % 360;
  return prev + delta;
};

const getTimeDigits = () => {
  const now = new Date();
  return [
  now.getHours(),
  now.getMinutes(),
  now.getSeconds()].
  flatMap(val => String(val).padStart(2, "0").split("").map(Number));
};

const randomAngle = () => Math.floor(Math.random() * 360);

return /*#__PURE__*/(
    React.createElement("div", {
      className: "clock",
      style: {
        "--hour-angle": initial ? randomAngle() : hourAngle,
        "--minute-angle": initial ? randomAngle() : minuteAngle,
        "--dur": initial ? 1 : 0.4 } }));

};

const App = () => {
  const [time, setTime] = useState(Array(6).fill(0));
  const [initial, setInitial] = useState(true);

useEffect(() => {
    let updateTimerId;
    const updateTime = () => {
      setTime(getTimeDigits());
      const now = Date.now();
      const delay = 1000 - now % 1000;
      updateTimerId = setTimeout(updateTime, delay);
    };

const initialTimerId = setTimeout(() => {
      setInitial(false);
      updateTime();
    }, 600);

return () => {
      clearTimeout(updateTimerId);
      clearTimeout(initialTimerId);
    };
  }, []);

return /*#__PURE__*/(
    React.createElement("div", { className: "app" },
    time.map((t, i) => /*#__PURE__*/
    React.createElement("div", { key: i },
    digits[t].map(({ h, m }, j) => /*#__PURE__*/React.createElement(Clock, { key: j, h: h, m: m, initial: initial }))))));

};

createRoot(document.getElementById('root')).render( /*#__PURE__*/React.createElement(App, null));

</script>

</body></html>

CSS

body {
  padding: 0;
  margin: 0;
}

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

.app {
  --clock-size: 3vw;
  --gap: calc(var(--clock-size) * 0.05);
  --clock-segment-w: calc(var(--clock-size) * 4 + var(--gap) * 5);
  --clock-segment-h: calc(var(--clock-size) * 6 + var(--gap) * 5);
  font-family: sans-serif;
  text-align: center;
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding-left: calc(var(--clock-size) + var(--gap) * 2);
}

.app > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: var(--clock-segment-w);
  height: var(--clock-segment-h);
}

.app > div:nth-of-type(even) {
  margin-right: var(--clock-size);
}

.clock {
  --w: 47%;
  --h: 3px;
  --dur: 0.4s;
  position: relative;
  width: var(--clock-size);
  height: var(--clock-size);
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid white;
  background: linear-gradient(225deg, #d0d0d0 10%, white);
  box-shadow: -2px 2px 6px #d0d0d0,
               2px -2px 6px #ffffff;
}

.clock::before,
.clock::after {
  position: absolute;
  content: '';
  top: calc(50% - var(--h) * 0.5);
  left: 50%;
  transform-origin: 0% 50%;
  width: var(--w);
  height: var(--h);
  background: black;
  border-radius: 9999px;
  transition: calc(var(--dur) * 1s) ease-in-out;
  transform: rotate(calc(var(--angle) * 1deg));
}

.clock::before {
  --angle: var(--hour-angle);
}

.clock::after {
  --angle: var(--minute-angle);
}

@media (max-width: 700px) {
  .clock {
    --h: 2px;
    border: 1px solid white;
  }
}

@media (max-width: 500px) {
  .clock {
    --h: 1px;
    --w: 50%;
  }
}