要定制化顯示格式,您可以在CountdownTimer組件中使用自定義樣式和格式化函數來實現。以下是一個示例代碼,演示如何在CountdownTimer組件中自定義顯示格式:
import React, { useState } from 'react';
import CountdownTimer from 'react-countdown-timer';
const formatTime = (time) => {
const seconds = Math.floor(time / 1000) % 60;
const minutes = Math.floor(time / (1000 * 60)) % 60;
const hours = Math.floor(time / (1000 * 60 * 60)) % 24;
const days = Math.floor(time / (1000 * 60 * 60 * 24));
return `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
};
const CustomCountdownTimer = () => {
const [endDate] = useState(new Date('2022-12-31T00:00:00'));
return (
<CountdownTimer
endDate={endDate}
formatTime={formatTime}
textStyle={{ fontSize: 20, color: 'red' }}
/>
);
};
export default CustomCountdownTimer;
在上面的示例中,我們定義了一個formatTime
函數來自定義時間顯示格式,并將其傳遞給CountdownTimer組件的formatTime
屬性。我們還可以通過textStyle
屬性來定義自定義的文本樣式。您可以根據自己的需求來調整樣式和格式。