添加12/24小时制切换功能
- 在数码管样式左侧添加 AM/PM 显示（12小时制） - 添加12H/24H切换按钮，紧贴数字左侧显示 - 修复CSS无效代码 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8b43d2fb35
commit
0f0809b1c0
79
src/App.css
79
src/App.css
@ -29,19 +29,92 @@
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.clock-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.digital-clock-outer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.digital-clock-side-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.digital-clock-period {
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.format-toggle-side {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.format-toggle-side:hover {
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.format-toggle {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.format-toggle:hover {
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.clock-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Digital clock style (default) */
|
||||
.digital-clock-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.digital-clock {
|
||||
font-family: 'DSEG7', monospace;
|
||||
font-weight: bold;
|
||||
|
||||
69
src/App.tsx
69
src/App.tsx
@ -5,17 +5,35 @@ import './App.css'
|
||||
|
||||
type ClockStyle = 'digital' | 'flip' | 'roll'
|
||||
|
||||
function DigitalClock({ time, size }: { time: string; size: number }) {
|
||||
function DigitalClock({ time, size, period, is24Hour, onToggleFormat }: { time: string; size: number; period?: string; is24Hour: boolean; onToggleFormat: () => void }) {
|
||||
// Match visual height with flip/roll clocks
|
||||
// Use slightly smaller than size to prevent overflow, but keep height similar
|
||||
const fontSize = Math.floor(size * 0.95)
|
||||
const periodSize = Math.floor(size * 0.25)
|
||||
|
||||
return (
|
||||
<div
|
||||
className="digital-clock"
|
||||
style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
|
||||
>
|
||||
{time}
|
||||
<div className="digital-clock-outer">
|
||||
<div className="digital-clock-side-panel">
|
||||
{!is24Hour && period && (
|
||||
<span
|
||||
className="digital-clock-period"
|
||||
style={{ fontSize: `${periodSize}px` }}
|
||||
>
|
||||
{period}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
className="format-toggle-side"
|
||||
onClick={onToggleFormat}
|
||||
>
|
||||
{is24Hour ? '24H' : '12H'}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="digital-clock"
|
||||
style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
|
||||
>
|
||||
{time}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -24,6 +42,7 @@ function App() {
|
||||
const [time, setTime] = useState(new Date())
|
||||
const [clockStyle, setClockStyle] = useState<ClockStyle>('digital')
|
||||
const [clockSize, setClockSize] = useState(120)
|
||||
const [is24Hour, setIs24Hour] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
@ -49,7 +68,25 @@ function App() {
|
||||
return () => window.removeEventListener('resize', updateSize)
|
||||
}, [])
|
||||
|
||||
const timeString = `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}:${String(time.getSeconds()).padStart(2, '0')}`
|
||||
// Format time based on 12/24 hour setting
|
||||
const formatTime = () => {
|
||||
let hours = time.getHours()
|
||||
const minutes = String(time.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(time.getSeconds()).padStart(2, '0')
|
||||
let period: string | undefined
|
||||
|
||||
if (!is24Hour) {
|
||||
period = hours >= 12 ? 'PM' : 'AM'
|
||||
hours = hours % 12 || 12
|
||||
}
|
||||
|
||||
return {
|
||||
timeString: `${String(hours).padStart(2, '0')}:${minutes}:${seconds}`,
|
||||
period
|
||||
}
|
||||
}
|
||||
|
||||
const { timeString, period } = formatTime()
|
||||
|
||||
const renderClock = () => {
|
||||
switch (clockStyle) {
|
||||
@ -59,7 +96,15 @@ function App() {
|
||||
return <RollClock time={timeString} size={clockSize} />
|
||||
case 'digital':
|
||||
default:
|
||||
return <DigitalClock time={timeString} size={clockSize} />
|
||||
return (
|
||||
<DigitalClock
|
||||
time={timeString}
|
||||
size={clockSize}
|
||||
period={period}
|
||||
is24Hour={is24Hour}
|
||||
onToggleFormat={() => setIs24Hour(!is24Hour)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,8 +131,10 @@ function App() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="clock-container">
|
||||
{renderClock()}
|
||||
<div className="clock-wrapper">
|
||||
<div className="clock-container">
|
||||
{renderClock()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user