react 手写优化实现 antd 倒计时功能组件（ 附源码）

Posted 2022-01-28 大唐荣华

起因是因为PM觉得 antd 的倒计时组件丑，所以花了一点时间手写了一个这样样式的，希望能帮到需要的人。

原来antd ： 8天8时8分8秒>0天8时8分8秒>0天0时8分8秒>>0天0时0分8秒
此组件样式： 8天8时8分8秒>8时8分8秒>8分8秒>8秒

创作不易，点个赞收藏一下吧！！！

使用

import Countdown from './countdown'
   const translate = (time: any) => 
        let date = new Date(time);
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let D = date.getDate() + ' ';
        let h = date.getHours() + ':';
        let m = date.getMinutes() + ':';
        let s = date.getSeconds();
        return Y + M + D + h + m + s;
    
     const deadtime = translate(endTime);
 return （
      <Countdown deadtime=deadtime />  // 转换后的结束时间
 ）

源码

import React,  Component  from 'react';

class Countdown extends Component<any, any> 
    timer: any = null  // 解决类型“Countdown”上不存在属性“timer”。ts(2339)
    constructor(props: any) 
        super(props);
        let end_time = new Date(props?.deadtime).getTime(),
        sys_second = (end_time - new Date().getTime());
        let  day, hour, minute, second  = this.getInitTimeSate(sys_second);
        this.state = 
            day: day,
            hour: hour < 10 ? "0" + hour : hour,
            minute: minute < 10 ? "0" + minute : minute,
            second: second < 10 ? "0" + second : second,
        
    
    componentDidMount() 
        if (this.props.deadtime) 
            let endTime = this.props.deadtime.replace(/-/g, "/");
            this.countFun(endTime);
        
    
    // 组件卸载取消倒计时
    componentWillUnmount() 
        clearInterval(this.timer);
    

    getInitTimeSate(sys_second: number)
        let day = Math.floor((sys_second / 1000 / 3600) / 24);
        let hour = Math.floor((sys_second / 1000 / 3600) % 24);
        let minute = Math.floor((sys_second / 1000 / 60) % 60);
        let second = Math.floor(sys_second / 1000 % 60);
        return  day, hour, minute, second 
    

    countFun = (endTime: string) => 
        let end_time = new Date(endTime).getTime(),
            sys_second = (end_time - new Date().getTime());
        this.timer = setInterval(() => 
            // 防止倒计时出现负数
            if (sys_second > 1000) 
                sys_second -= 1000;
                let  day, hour, minute, second  = this.getInitTimeSate(sys_second);
                this.setState(
                    day: day,
                    hour: hour < 10 ? "0" + hour : hour,
                    minute: minute < 10 ? "0" + minute : minute,
                    second: second < 10 ? "0" + second : second,
                )
             else 
                clearInterval(this.timer);
            
        , 1000);
    
    render() 
        return (
            <div>
                this.state.day ? <span>this.state.day天</span> : null
                this.state.day > 0 || this.state.hour > 0 ? <span>this.state.hour时</span> : null
                this.state.day > 0 || this.state.hour > 0 || this.state.minute > 0 ? <span>this.state.minute分</span> : null
                this.state.day > 0 || this.state.hour > 0 || this.state.minute > 0 || this.state.second > 0 ? <span>this.state.second秒</span> : null
            </div>
        )
    


export default  Countdown;

创作不易，点个赞收藏一下吧！！！