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}
);
});
};
return (
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) }} />
export default Clock;
相关阅读
这个示例演示什么？
用 styled-components 在 React 里实现一个带动态秒针的圆盘时钟，演示 CSS-in-JS 的组件化样式写法。
时钟的指针怎么动起来？
用 styled-components 定义各指针样式，再用 React 状态定时更新旋转角度，配合 transition 实现平滑动画。
为什么用 styled-components？
它把样式与组件绑定在一起，避免全局 CSS 污染，组件即样式单元，便于复用与维护。
圆盘和指针的结构怎么组织？
用容器组件画表盘、子组件画各指针与中心轴，通过 position 与 transform 定位，结构清晰。
适合作为哪类学习材料？
适合想理解 CSS-in-JS、React 动画与组件化思路的前端学习者作为入门示例。
发表回复