React Hooks+ TypeScript 实现24小时的倒计时并支持响应式布局：768以上按1440样式展示，768及其以下按768样式展示

```jsx import React, { useState, useEffect } from 'react' import { render } from 'react-dom' import styled from 'styled-components' // 响应式样式，当尺寸大于768px时，按1440px的样式展示；当尺寸小于768px时，按768px的样式展示。 const CountDownWrapper = styled.div<{ isBig: boolean }>` width: ${props => (props.isBig ? 1440 : 768)}px; .countdown-item{ // 样式省略...} @media screen and (max-width: 768px) { // 当屏幕宽度小于768时重写样式 width: 768px; .countdown-item{ // 样式省略...} } `; interface IProps { // 定义一个参数接口IProps endTime?: string | number; // 结束时间（可选参数） isBig?: boolean; // 是否是大屏幕(默认false) } const CountDown = (props: IProps) => { const [endTime] = useState(() => new Date(props.endTime).getTime()); const [nowTime, setNowTime] = useState(Date.now()); const [difference, setDifference] = useState<number>(0); const [isBig] = useState<boolean>(props.isBig || false); let timerId: any; // 计时器ID /** * @description 计算差值 */ const getDifferenceValue = () => { let differenceValue = endTime - nowTime; if (differenceValue > 0) setDifference(differenceValue); else clearInterval(timerId); }; /** * @description 运行计时函数 */ const runTimerFunc = () => { timerId && clearInterval(timerId); timerId = setInterval(() => { setNowTime((prevNowtime) => prevNowtime + 1000); }, 1000); }; /** * @description 运行所有函数 */ useEffect(() => { getDifferenceValue(); runTimerFunc(); return () => clearInterval(timerId); }, [] ); return ( <CountDownWrapper isBig={isBig}> <div className="countdown-item"> <span className="num">{Math.floor((difference % 86400000) / 3600000)}</span> <span className="text">时</span> </div> <div className="countdown-item"> <span className="num">{Math.floor((difference % 3600000) / 60000)}</span> <span className="text">分</span> </div> <div className="countdown-item"> <span className="num">{Math.floor((difference % 60000) / 1000)}</span> <span className="text">秒</span> </div></CountDownWrapper>)}; render (<CountDown endTime={new Date('2020/12/31 23:59')} />, document.getElementById('root') ) ;