score:1

Accepted answer

there's a fundamental design problem here which is that setinterval is the wrong tool for keeping time. setinterval only guarantees that the callback won't run for at least 1000 milliseconds, not that it will run exactly in 1000 milliseconds, so you're going to wind up with drift and skipped times.

i recommend using requestanimationframe and the date library or performance.now to determine when ticks have occurred.

with this set up, you can scale the hour hand proportional to the number of minutes left in the hour with:

(hours + minutes / 60) * 30 + 180

if you want a rougher granularity to the hour hand adjustments, truncate the minutes into 6 distinct chunks:

(hours + floor(minutes / 10) * 10 / 60) * 30 + 180

doing this mathematically is much less messy than looking up the increment points in a hardcoded array.

here's a minimal example which you could use to keep accurate time (i'll leave styling to you):

.hand {
  width: 2px;
  height: 40%;
  background-color: black;
  transform-origin: top center;
  position: absolute;
  border-radius: 3px;
  top: 50%;
  left: 50%;
}

.analog-clock {
  position: relative;
  border-radius: 50%;
  border: 1px solid #aaa;
  height: 120px;
  width: 120px;
}
<script type="text/babel" defer>
const {fragment, useeffect, usestate, useref} = react;

const clock = () => {
  const [date, setdate] = usestate(new date());
  const requestref = useref();
  let prevdate = null;
  
  const tick = () => {
    const now = new date();
    
    if (prevdate && now.getseconds() !== prevdate.getseconds()) {
      setdate(now);
    }
    
    prevdate = now;
    requestref.current = requestanimationframe(tick);
  };
  
  useeffect(() => {
    requestref.current = requestanimationframe(tick);
    return () => cancelanimationframe(requestref.current);
  }, []);
  
  const pad = n => n.tostring().padstart(2, 0);
  
  const computehourdeg = date => 
    (date.gethours() + ~~(date.getminutes() / 10) * 10 / 60) * 30 + 180
  ;

  return (
    <fragment>
      <div classname="analog-clock">
        <div
          classname="hand"
          style={{transform: `rotate(${6 * date.getseconds() + 180}deg)`}}
        ></div>
        <div
          classname="hand"
          style={{transform: `rotate(${6 * date.getminutes() + 180}deg)`}}
        ></div>
        <div
          classname="hand"
          style={{background: "red", 
                  height: "30%",
                  transform: `rotate(${computehourdeg(date)}deg)`}}
        ></div>
      </div>
      <h3>
        {pad(date.gethours())}:
        {pad(date.getminutes())}:
        {pad(date.getseconds())}
      </h3>
    </fragment>
  );
};

reactdom.render(<clock />, document.body);

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

here's a sped-up version with a mocked date object to illustrate that it's working correctly:

.hand {
  width: 2px;
  height: 40%;
  background-color: black;
  transform-origin: top center;
  position: absolute;
  border-radius: 3px;
  top: 50%;
  left: 50%;
}

.analog-clock {
  position: relative;
  border-radius: 50%;
  border: 1px solid #aaa;
  height: 120px;
  width: 120px;
}
<script type="text/babel" defer>
const {fragment, useeffect, usestate, useref} = react;

const speedms = 5;

class mockdate {
  static second = 0;
  static minute = 0;
  static hour = 0;
  
  constructor() {
    this.second = mockdate.second;
    this.minute = mockdate.minute;
    this.hour = mockdate.hour;
  }
  
  getseconds() {
    return this.second;
  }
  
  getminutes() {
    return this.minute;
  }
  
  gethours() {
    return this.hour || 12;
  }
}

setinterval(() => {
  if (++mockdate.second === 60) {
    mockdate.second = 0;

    if (++mockdate.minute === 60) {
      mockdate.minute = 0;
      mockdate.hour = (mockdate.hour + 1) % 12;
    }
  }
}, speedms);

const clock = () => {
  const [date, setdate] = usestate(new mockdate());
  const requestref = useref();
  let prevdate = null;

  const tick = () => {
    const now = new mockdate();

    if (prevdate && now.getseconds() !== prevdate.getseconds()) {
      setdate(now);
    }

    prevdate = now;
    requestref.current = requestanimationframe(tick);
  };

  useeffect(() => {
    requestref.current = requestanimationframe(tick);
    return () => cancelanimationframe(requestref.current);
  }, []);

  const pad = n => n.tostring().padstart(2, 0);

  const computehourdeg = date => 
    (date.gethours() + ~~(date.getminutes() / 10) * 10 / 60) * 30 + 180
  ;

  return (
    <fragment>
      <div classname="analog-clock">
        <div
          classname="hand"
          style={{transform: `rotate(${6 * date.getseconds() + 180}deg)`}}
        ></div>
        <div
          classname="hand"
          style={{transform: `rotate(${6 * date.getminutes() + 180}deg)`}}
        ></div>
        <div
          classname="hand"
          style={{background: "red", 
                  height: "30%",
                  transform: `rotate(${computehourdeg(date)}deg)`}}
        ></div>
      </div>
      <h3>
        {pad(date.gethours())}:
        {pad(date.getminutes())}:
        {pad(date.getseconds())}
      </h3>
    </fragment>
  );
};


reactdom.render(<clock />, document.body);

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


Related Query

More Query from same tag