24 |
25 |
26 |
27 |
28 |
29 |
30 | {hh}
31 | :
32 | {mm}
33 | :
34 | {ss}
35 |
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/demo/src/App/Main/Main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import AnalogClock from "./AnalogClock/AnalogClock";
4 | import DigitalClock from "./DigitalClock/DigitalClock";
5 | import Timename from "./Timename/Timename";
6 |
7 |
8 |
9 | interface MainProps {
10 | //
11 | }
12 |
13 | export default function Main ({}: MainProps) {
14 | const [time, setTime] = React.useState(Date.now());
15 | const offsetMinutes = new Date().getTimezoneOffset();
16 | const offsetMs = offsetMinutes * 60 * 1000;
17 | const localTime = time - offsetMs;
18 |
19 | const updateTime = () => setTime(Date.now());
20 | React.useEffect(() => {
21 | const interval = setInterval(updateTime, 50);
22 | return () => clearInterval(interval);
23 | }, []);
24 |
25 | const [dialSize, setDialSize] = React.useState(320);
26 | const padding = 16;
27 | const paddingX = padding * 2;
28 | const paddingY = padding * 2;
29 | const headerHeight = 80;
30 | const footerHeight = 80;
31 | const updateDialSize = () => {
32 | const h = window.innerHeight - paddingY - headerHeight - footerHeight;
33 | const w = window.innerWidth - paddingX;
34 | const min = Math.min(h, w);
35 | setDialSize(min);
36 | };
37 | React.useEffect(() => {
38 | updateDialSize();
39 | window.addEventListener('resize', updateDialSize);
40 | return () => window.removeEventListener('resize', updateDialSize);
41 | }, []);
42 |
43 | return (
44 |