1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
/**
* Analog Clock
*/
import React, { useState, useEffect } from "react";
import { rand } from "../utils/index.js";
const clock = {
width: "20vw",
height: "20vw",
background: "url(assets/img/clock/clock.png)",
backgroundSize: "contain",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
position: "relative",
};
const handStyle = {
position: "absolute",
top: "0%",
left: "0%",
};
const hourStyle = {
...handStyle,
height: "calc(540 / 1268 * 10vw)",
transformOrigin: "45.46% 96.62%",
};
const minuteStyle = {
...handStyle,
height: "calc(795 / 1268 * 10vw)",
transformOrigin: "50% 84.05%",
};
const secondStyle = {
...handStyle,
height: "calc(993 / 1268 * 10vw)",
transformOrigin: "45.83% 76.63%",
};
const hourTransform =
"translateX(10.45vw) translateY(10vw) translateX(-100%) translateY(-100%) ";
const minuteTransform =
"translateX(10.45vw) translateY(10.8vw) translateX(-100%) translateY(-100%) ";
const secondTransform =
"translateX(10.2vw) translateY(11.5vw) translateX(-100%) translateY(-100%) ";
export default function Clock({ utc, onLoad }) {
const [hour, setHour] = useState({});
const [minute, setMinute] = useState({});
const [second, setSecond] = useState({});
useEffect(() => {
const update = () => {
const time = new Date();
const hours = utc ? time.getUTCHours() : time.getHours();
const minutes = time.getMinutes();
const seconds = time.getSeconds();
const ms = time.getMilliseconds();
setHour({
...hourStyle,
transform:
hourTransform +
"rotate(" +
(((hours % 12) + minutes / 60 + seconds / 3600) / 12) * 360 +
"deg)",
});
setMinute({
...minuteStyle,
transform:
minuteTransform +
"rotate(" +
(minutes / 60 + seconds / 3600) * 360 +
"deg)",
});
setSecond({
...secondStyle,
transform:
secondTransform +
"rotate(" +
(seconds / 60 + ms / 60000) * 360 +
"deg)",
});
};
update();
const intervalId = setInterval(update, 50);
return () => clearInterval(intervalId);
}, []);
return (
<div style={clock}>
<img src="assets/img/clock/hour.png" style={hour} onLoad={onLoad} />
<img src="assets/img/clock/minute.png" style={minute} />
<img src="assets/img/clock/second.png" style={second} />
</div>
);
}
// ratio: 500 / 1268
// hour: 540
// minute: 795
// second: 993
// hour transform origin: 40 x 515 // 88 / 533
// minute transform origin: 37 x 622 // 72 x 740
// second transform origin: 11 x 751 // 24 x 980
|
