Horloge React composée de composants d'horloges

705 codex

Ouvrir dans l'éditeur Publiez votre code

Horloge React composée de composants d'horloges

Recommandé

13 November 2024

menu de navigation

22 August 2025

Commentaire d'espace réservé au code HTML

17 November 2024

Barre de menu horizontale

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