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

62 阅读 0 评论 41 点赞

我是靠谱客的博主忧伤眼睛，最近开发中收集的这篇文章主要介绍react 手写优化实现 antd 倒计时功能组件（附源码），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

起因是因为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;

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