欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

随笔——倒计时

程序员文章站 2022-03-09 08:04:00
{ console.log('倒计时结束'); }} */ />**CountDown组件如下:**import React, { useEffect } ......
          <CountDown
            format="hh:mm"
            startDate={new Date()}
            endDate={text}
            /* cb={() => {
            console.log('倒计时结束');
          }} */
          />
**CountDown组件如下:**
import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';

export type CdFormat = 'dd:hh:mm:ss' | 'hh:mm:ss' | 'hh:mm' | 'mm:ss';

interface IProps {
  startDate: string | Date;
  endDate: string | Date;
  format?: CdFormat;
  cb?(): void;
}

const stringToDate = (date: string | Date) => {
  if (typeof date === 'string') {
    // 日期字符串转换为日期对象,并兼容ios
    return new Date(Date.parse(date.replace(/-/g, '/')));
  }
  return date;
};

/**
 * 单个数字格式化为两位数, 9 => 09
 * @param num
 * @returns {string}
 */
const formatTwoDigit = (num: number): string => {
  if (num < 10) {
    return (Array(2).join('0') + num).slice(-2);
  }
  return num.toString();
};

const CountDown: React.FC<IProps> = props => {
  const [formatDate, setFormatDate] = useImmer<string>('');

  const { startDate, endDate, format = 'hh:mm:ss', cb = () => {} } = props;
  const [defaultValue, setDefaultValue] = useImmer<string>('');
  useEffect(() => {
    switch (format) {
      case 'dd:hh:mm:ss':
        setDefaultValue(() => '00:00:00:00');
        break;
      case 'hh:mm:ss':
        setDefaultValue(() => '00:00:00');
        break;
      default:
        setDefaultValue(() => '00:00');
    }
  }, [format]);
  useEffect(() => {
    let interval: any = null;
    clearInterval(interval);

    const sDate = stringToDate(startDate);
    const eDate = stringToDate(endDate);

    const startTime = sDate.getTime();
    const endTime = eDate.getTime();

    // 获取相差的毫秒数
    let diffTime = endTime - startTime;

    if (diffTime > 0) {
      interval = setInterval(() => {
        if (diffTime <= 0) {
          clearInterval(interval);
          cb();
          interval = null;
        }

        let m: string = formatTwoDigit(Math.floor((diffTime / 1000 / 60) % 60));
        const s: string = formatTwoDigit(Math.floor((diffTime / 1000) % 60));

        let result = '';

        // dd:hh:mm:ss
        if (/^(d{2}).+(h{2}).+(m{2}).+(s{2})$/.test(format)) {
          const d: string = formatTwoDigit(Math.floor(diffTime / 1000 / 60 / 60 / 24));
          const h: string = formatTwoDigit(Math.floor((diffTime / 1000 / 60 / 60) % 24));
          result = format
            .replace(/dd/, d)
            .replace(/hh/, h)
            .replace(/mm/, m)
            .replace(/ss/, s);
          setFormatDate(() => result);
        }
        // hh:mm:ss
        else if (/^(h{2}).+(m{2}).+(s{2})$/.test(format)) {
          const h = formatTwoDigit(Math.floor(diffTime / 1000 / 60 / 60));
          result = format
            .replace(/hh/, h)
            .replace(/mm/, m)
            .replace(/ss/, s);
          setFormatDate(() => result);
        }
        // hh:mm
        else if (/^(h{2}).+(m{2})$/.test(format)) {
          const h = formatTwoDigit(Math.floor(diffTime / 1000 / 60 / 60));
          result = format.replace(/hh/, h).replace(/mm/, m);
          setFormatDate(() => result);
        }
        // mm:ss
        else if (/^(m{2}).+(s{2})$/.test(format)) {
          m = formatTwoDigit(Math.floor(diffTime / 1000 / 60));
          result = format.replace(/mm/, m).replace(/ss/, s);
          setFormatDate(() => result);
        } else {
          clearInterval(interval);
          interval = null;
          throw new Error('format is error');
        }
        diffTime -= 1000;
      }, 1000);
    }

    return () => {
      clearInterval(interval);
    };
  }, [startDate, endDate]);
  return <div>{formatDate || defaultValue}</div>;
};

export default React.memo(CountDown);

本文地址:https://blog.csdn.net/weixin_44268707/article/details/110233424

相关标签: 随笔 js