时间处理及倒计时

2022-03-30  本文已影响0人  萤火kin

时间处理

可参考:https://blog.csdn.net/qq_36864205/article/details/110923888

import moment from 'moment';
new Date()  // Mon Mar 28 2022 11:20:05 GMT+0800 (GMT+08:00)
new Date().getTime()  // 1648437648080
new Date(1648437648080)  // Mon Mar 28 2022 11:20:48 GMT+0800 (GMT+08:00)
new Date(1900, 1, 1)  // Thu Feb 01 1900 00:00:00 GMT+0800 (GMT+08:00)
new Date('2022-03-11')  // Fri Mar 11 2022 08:00:00 GMT+0800 (GMT+08:00)
new Date('2022-03-11').getFullYear() // 2022
new Date('2022-03-11').getMonth() // 2
new Date('2022-03-11').getMonth() + 1 // 3
new Date('2022-03-11').getDate() // 11

moment(new Date())
moment(new Date()).format('YYYY-MM-DD')

时间比较

// IOS系统需要写先处理兼容性问题
const examEndTime = this.examEndTime.replace(/-/g, '/')
const examStartTime = this.examStartTime.replace(/-/g, '/')
if (
   Date.parse(examEndTime) > new Date() &&
   new Date() > Date.parse(examStartTime)
) {}

倒计时【根据后端返回开始时间及new date当前时间计算剩余时间】

import moment from 'moment';
// 倒计时
  const [countdown, setCountdown] = useState('0小时 0分 0秒');
  let outTimer: any;
  // 获取模块限时状态
  const [timeSelect, setTimeSelect] = useState<any>(null);
  let timeleftNew = 0;
  useEffect(async () => {
      const result = await timeStateApi(scoreId);
      if (result) {
        const select = result.stateList[parseFloat(selectedMenu.id) - 1];
        setTimeSelect(select);
      } else {
        Toast.info('信息获取失败!', 1.5);
      }
  }, []);

  useEffect(() => {
    if (timeSelect) {
      // 倒计时
        const startTime = new Date(timeSelect.startTime).getTime();
        const nowTime = new Date().getTime();
        const endTime = startTime + timeSelect.limitTime * 1000;
        let timeDifference = endTime - nowTime * 1000;
        if (timeDifference > 0) {
          outTimer = setInterval(changeTime, 1000);
        } else {
          clearInterval(outTimer);
          setTimeOutShow(true);
        }
    }
    return () => {
      clearInterval(outTimer);
    };
  }, [timeSelect]);

  const changeTime = () => {
    const timeOutInfo = timeSelected.stateList[parseFloat(selectedMenu.id) - 1];
    const startTime = new Date(timeOutInfo.startTime).getTime();
    const nowTime = new Date().getTime();
    const endTime = startTime + timeOutInfo.limitTime * 1000;
    let timeDifference = endTime - nowTime * 1000;
    let d, h, m, s;
    if (timeDifference > 0) {
      d = Math.floor(timeDifference / 1000 / 60 / 60 / 24);
      h = Math.floor((timeDifference / 1000 / 60 / 60) % 24);
      m = Math.floor((timeDifference / 1000 / 60) % 60);
      s = Math.floor((timeDifference / 1000) % 60);
      d
        ? setCountdown(`${d}天 ${h}小时 ${m}分 ${s}秒`)
        : setCountdown(`${h}小时 ${m}分 ${s}秒`);
    } else {
      setCountdown(`0小时 0分 0秒`);
      clearInterval(outTimer);
      setTimeOutShow(true);
    }
  };

倒计时【根据后端返回剩余时间】

// 倒计时
  const [countdown, setCountdown] = useState('0小时 0分 0秒');
  let outTimer: any;
  // 获取模块限时状态
  const [timeSelect, setTimeSelect] = useState<any>(null);
  let timeleftNew = 0;
  useEffect(async () => {
      const result = await timeStateApi(scoreId);
      if (result) {
        const select = result.stateList[parseFloat(selectedMenu.id) - 1];
        setTimeSelect(select);
      } else {
        Toast.info('信息获取失败!', 1.5);
      }
  }, []);

  useEffect(() => {
    if (timeSelect) {
      // 倒计时
        timeleftNew = timeSelect.timeLength;
        let timeDifference = timeleftNew;
        if (timeDifference > 0) {
          outTimer = setInterval(changeTime, 1000);
        } else {
          clearInterval(outTimer);
          setTimeOutShow(true);
        }
    }
    return () => {
      clearInterval(outTimer);
    };
  }, [timeSelect]);

  const changeTime = () => {
    let timeDifference = timeleftNew;
    let d, h, m, s;
    if (timeDifference > 0) {
      d = Math.floor(timeDifference / 60 / 60 / 24);
      h = Math.floor((timeDifference / 60 / 60) % 24);
      m = Math.floor((timeDifference / 60) % 60);
      s = Math.floor(timeDifference % 60);
      d
        ? setCountdown(`${d}天 ${h}小时 ${m}分 ${s}秒`)
        : setCountdown(`${h}小时 ${m}分 ${s}秒`);
      timeleftNew = timeleftNew - 1;
    } else {
      setCountdown(`0小时 0分 0秒`);
      clearInterval(outTimer);
      setTimeOutShow(true);
    }
  };
上一篇 下一篇

猜你喜欢

热点阅读