SOURCE

console 命令行工具 X clear

                    
>
console
// import React, { useState, useEffect, useRef } from "react";
// const {
//   {useState, useEffect, useRef}
// } = react;

// console.info(React)
// import ReactDOM from "react-dom";
// import "antd/dist/antd.css";
// import "./index.scss";
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(() => {
        // let id = setInterval(() => setClock(getClock), 1000);
        setClock(getClock);
        // return () => clearInterval(id);
    }, []);

    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>

本项目引用的自定义外部资源