美文网首页
时间处理及倒计时

时间处理及倒计时

作者: 萤火kin | 来源:发表于2022-03-30 16:27 被阅读0次

时间处理

可参考: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);
    }
  };

相关文章

  • iOS关于秒杀活动倒计时的处理

    demo地址效果图 1.时间处理 既然是倒计时,肯定要有一个对比时间,所以为了保证活动倒计时不受修改本机系统时间的...

  • angular 处理倒计时问题

    近期在做项目的时候遇到了,前端需要处理倒计时的问题,本地的为起始时间,服务器推送结束时间时间戳长度为13位,处理结...

  • 自己实现一个简单的列表倒计时

    对于倒计时,为了让时间更精细化,以及列表Item的复用性考虑,个人觉得最好的处理办法是接口返回两个时间,一个倒计时...

  • 活动倒计时关于时间的处理

    (void)timeWithStr:(NSString )str{ NSDate dat = [NSDate da...

  • 小程序短信倒计时功能

    1.codetime 2.短信发送成功处理倒计时,进入的时候需要判断倒计时是否结束。

  • 2018-08-21 day07-作业

    作业1:进度条 作业2:秒表 作业3:文字时间 作业4:处理className兼容问题 作业5:发送短信倒计时

  • 交通事故处理时间限制及处理程序

    在交通事故的处理中,往往会遇到很多时间限制,这就是交通事故的处理期限,相关部门必须在法律规定的期限内做出交通事故处...

  • 坚持的勇气

    喜欢做倒计时,没来得及从网上买倒计时工具,便简单的在手机APP中下载了“FancyDays"。 这是我的倒计时,有...

  • 短小精悍CountDownTimer

    一个短小精悍的冷门类时间倒计时,亦或者不止时间倒计时. CountDownTimer 用法: 即可实现60秒时间倒计时.

  • react fiber源码实现

    核心思路及思想 利用requestIdleCallback实现每帧空余时间处理单个fiber,提升render阶段...

网友评论

      本文标题:时间处理及倒计时

      本文链接:https://www.haomeiwen.com/subject/ygcpjrtx.html