React Clock composto da componenti di orologi

422 codex

Apri nell'Editor Video Pubblica il Tuo Codice

React Clock composto da componenti di orologi

Consigliato

28 October 2024

Progettazione della scheda profilo

14 September 2024

Modulo di Accesso Moderno

12 July 2025

Contatore di clic della barra spaziatrice - JavaScript HTML

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%;
  }
}

Consigliato

Progettazione della scheda profilo

Modulo di Accesso Moderno

Contatore di clic della barra spaziatrice - JavaScript HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS