import { useRef, useState, useEffect } from 'react';
/**
* 解析毫秒为天、时、分、秒
* @param milliseconds 毫秒
*/
const parseMs = (milliseconds: number) => {
return {
days: Math.floor(milliseconds / 86400000),
hours: Math.floor(milliseconds / 3600000) % 24,
minutes: Math.floor(milliseconds / 60000) % 60,
seconds: Math.floor(milliseconds / 1000) % 60,
};
};
/**
* 倒计时
* @param endTimeStamp 结束时间的时间戳
*/
const useCountDown = (endTimeStamp: number) => {
const timer = useRef(0);
const [state, setState] = useState(endTimeStamp);
// 计算时间的差值
const calcTimeDiff = () => {
// 获取当前时间戳
const currentTime = +new Date();
// 计算当前时间和结束时间的差值
const seconds = Math.floor((endTimeStamp || 0) - currentTime);
// 如果是负数 就清空定时器
if (seconds <= 0) {
clearInterval(timer.current);
return setState(0);
}
setState(seconds);
};
useEffect(() => {
calcTimeDiff();
timer.current = setInterval(() => {
calcTimeDiff();
}, 1000);
return () => {
clearInterval(timer.current);
};
}, []);
const { days, hours, minutes, seconds } = parseMs(state);
return { days, hours, minutes, seconds };
};
export default useCountDown;
点击链接查看运行效果:https://codesandbox.io/s/elastic-wood-yomiu?fontsize=14&hidenavigation=1&theme=dark
github:https://github.com/isxiaoxin/front_end_wheel
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。