console
const ClockMath = {
ANGLE: 360,
INIT12: -90,
perHourAngle: function (n) {
return (this.ANGLE / 12) * n;
},
perMinuteAngle: n => (ClockMath.ANGLE / 60) * n,
perSecondAngle: n => (ClockMath.ANGLE / 60) * n,
hourAngle: ([hour, mimute, second]) =>
ClockMath.perHourAngle(hour) +
ClockMath.perMinuteAngle(mimute) / 12 +
ClockMath.perSecondAngle(second) / 60 / 12,
minuteAngle: ([mimute, second]) =>
ClockMath.INIT12 +
ClockMath.perMinuteAngle(mimute) +
ClockMath.perSecondAngle(second) / 60,
secondAngle: ([second]) => ClockMath.INIT12 + ClockMath.perSecondAngle(second)
};
const getClock = () => {
const data = new Date();
const clock = {
second: ClockMath.secondAngle([data.getSeconds()]),
mimute: ClockMath.minuteAngle([data.getMinutes(), data.getSeconds()]),
hour: ClockMath.hourAngle([
data.getHours(),
data.getMinutes(),
data.getSeconds()
])
};
console.info(data.getSeconds(), data.getMinutes(), data.getHours());
return clock;
};
function App() {
const [clock, setClock] = useState({});
useEffect(() => {
setClock(getClock);
}, []);
console.info(clock);
return (
< div className="App" >
< div className="clock" >
<hand
className="hour"
style={{ transform: `rotate(${clock.hour}deg)` }}
/>
<hand
className="minute"
style={{ transform: `rotate(${clock.minute}deg)` }}
/>
<hand
className="second"
style={{ transform: `rotate(${clock.second}deg)` }}
/>
</div >
</div >
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src='https://unpkg.com/react@16.7.0/umd/react.production.min.js'>
</script>
<script src='https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js'>
</script>
<div id="root"></div>