43 lines
1.5 KiB
React
43 lines
1.5 KiB
React
import React, { useState, useEffect } from 'react';
|
|
import './Countdown.css';
|
|
|
|
const pad = (n) => String(n).padStart(2, '0');
|
|
|
|
export default function Countdown({ target = Date.now() + 3600000 }) {
|
|
const [now, setNow] = useState(Date.now());
|
|
useEffect(() => {
|
|
const t = setInterval(() => setNow(Date.now()), 1000);
|
|
return () => clearInterval(t);
|
|
}, []);
|
|
const diff = Math.max(0, target - now);
|
|
const d = Math.floor(diff / 86400000);
|
|
const h = Math.floor((diff % 86400000) / 3600000);
|
|
const m = Math.floor((diff % 3600000) / 60000);
|
|
const s = Math.floor((diff % 60000) / 1000);
|
|
|
|
return (
|
|
<div className="aa-countdown">
|
|
{d > 0 && (
|
|
<span className="aa-countdown-seg">
|
|
<span className="aa-countdown-num">{pad(d)}</span>
|
|
<span className="aa-countdown-label">天</span>
|
|
</span>
|
|
)}
|
|
<span className="aa-countdown-seg">
|
|
<span className="aa-countdown-num">{pad(h)}</span>
|
|
<span className="aa-countdown-label">时</span>
|
|
</span>
|
|
<span className="aa-countdown-sep">:</span>
|
|
<span className="aa-countdown-seg">
|
|
<span className="aa-countdown-num">{pad(m)}</span>
|
|
<span className="aa-countdown-label">分</span>
|
|
</span>
|
|
<span className="aa-countdown-sep">:</span>
|
|
<span className="aa-countdown-seg">
|
|
<span className="aa-countdown-num">{pad(s)}</span>
|
|
<span className="aa-countdown-label">秒</span>
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|