使用 styled-components 实现带有动态秒针的圆盘时钟的示例

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const ClockContainer = styled.div`
  width: 200px;
  height: 200px;
  border: 8px solid #333;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
`;

const Hand = styled.div`
  position: absolute;
  bottom: 50%;
  left: 50%;
  background: #333;
  transform-origin: bottom;
  transition: transform 0.5s ease-in-out;

  &.hour {
    height: 50px;
    width: 6px;
    background: black;
  }

  &.minute {
    height: 70px;
    width: 4px;
    background: gray;
  }

  &.second {
    height: 90px;
    width: 2px;
    background: red;
  }
`;

const Center = styled.div`
  position: absolute;
  width: 14px;
  height: 14px;
  background: black;
  border-radius: 50%;
`;

const Number = styled.div`
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: black;
`;

const Clock = () => {
  const [secondCounts, setSecondCounts] = useState(0);
  const [minuteCounts, setMinuteCounts] = useState(0);
  const [hourCounts, setHourCounts] = useState(0);
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const formatTime = (date) => {
    const hours = date.getHours() % 12;
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    return { hours, minutes, seconds };
  };

  const { hours, minutes, seconds } = formatTime(time);

  useEffect(() => {
    if(seconds === 0){
      setSecondCounts((secondCounts)=> secondCounts + 1);
    }

    if(minutes === 0 && seconds === 0){
      setMinuteCounts((minuteCounts)=> minuteCounts + 1);
    }

    if(hourCounts === 0 && minutes === 0 && seconds === 0){
      setHourCounts((hourCounts)=> hourCounts + 1);
    }
  }, [hours, minutes, seconds]);

  const renderNumbers = () => {
    const numbers = Array.from({ length: 12 }, (_, index) => index + 1);
    return numbers.map((number) => {
      const angle = (number * 30) - 90; // 计算数字位置
      const x = 80 * Math.cos((angle * Math.PI) / 180);
      const y = 80 * Math.sin((angle * Math.PI) / 180);
      return (
        <Number key={number} style={{ transform: `translate(${x}px, ${y}px)` }}>
          {number}
        </Number>
      );
    });
  };

  return (
    <ClockContainer>
      {renderNumbers()}
      <Hand className="hour" style={{ transform: `rotate(${(hours * 30) + (minutes / 2) + hourCounts * 360}deg)` }} />
      <Hand className="minute" style={{ transform: `rotate(${minutes * 6 + minuteCounts * 360}deg)` }} />
      <Hand className="second" style={{ transform: `rotate(${seconds * 6 + secondCounts * 360}deg)` }} />
      <Center />
    </ClockContainer>
  );
};

export default Clock;

作者： erishen

前端工程师 React, React Native, Taro, Node.js, Next.js, Express, Nest.js, PHP, Java / Spring Boot, Python, Go, Rust ... 查看erishen的所有文章