react实现时间戳倒计时拆分

实用,结合redis实时监听定时任务
适用于优惠券,活动倒计时,秒杀等业务场景*!!!*

import React, { Component } from 'react'
//路由传参
import {withRouter} from "react-router-dom"
import {Bottom} from "antd-mobile"
import './couponGuide.scss';
import axios from 'axios'
class CouponGuide extends Component {
    
    state = {
        leftTime:0,
        d:0,
        h:0,
        m:0,
        s:0,
        leftd:"0",
        rightd:"0",
        lefth:"0",
        righth:"0",
        leftm:"0",
        rightm:"0",
        lefts:"0",
        rights:"0",
    }

   async componentDidMount(){

        await setInterval(() => {
            this.setState({
                leftTime:this.state.leftTime-1
            })

            axios.post("http://localhost:9999/redis/time",{
                zgUserId:3
            }).then(res=>{

                //这里加个判断,如果0秒或者空,那么在发请求设置优惠券已过期

                this.setState({leftTime:parseInt(res.data)})
                //console.log(res.data)
            })
            
        }, 1000);
        

        await setInterval(() => {
            //console.log(this.state.leftTime)

            let d = Math.floor(this.state.leftTime/60/60/24)
            let h = Math.floor(this.state.leftTime/60/60%24)
            let m = Math.floor(this.state.leftTime/60%60)
            let s = Math.floor(this.state.leftTime%60)

            //拆分天
            let leftd = "";
            let rightd = "";
            let dd = d+""
            if(d>10){
                for (let i = 0; i < dd.length; i++) {
                    leftd = dd[0];
                    rightd = dd[1];
                    if(leftd == undefined){
                        leftd = 0+""
                    }
                } 
            }else if(d === 10){
                    rightd = 0+"";
                    leftd = 1+""
            }else{
                for (let i = 0; i < dd.length; i++) {
                    rightd = dd[0];
                    leftd = 0+""
                } 
            }
            console.log(leftd+"---"+rightd)
            //拆天结束

            //拆分时
            let lefth = "";
            let righth = "";
            let hh = h+""
            if(h>10){
                for (let i = 0; i < hh.length; i++) {
                    lefth = hh[0];
                    righth = hh[1];
                    if(lefth == undefined){
                        lefth = 0+""
                    }
                } 
            }else if(h === 10){
                    righth = 0+"";
                    lefth = 1+""
            }else{
                for (let i = 0; i < hh.length; i++) {
                    righth = hh[0];
                    lefth = 0+""
                } 
            }
            console.log(lefth+"---"+righth)
            //拆时结束

            //拆分分
            let leftm = "";
            let rightm = "";
            let mm = m+""
            if(m>10){
                for (let i = 0; i < mm.length; i++) {
                    leftm = mm[0];
                    rightm = mm[1];
                    if(leftm == undefined){
                        leftm = 0+""
                    }
                } 
            }else if(h === 10){
                    rightm = 0+"";
                    leftm = 1+""
            }else{
                for (let i = 0; i < mm.length; i++) {
                    rightm = mm[0];
                    leftm = 0+""
                } 
            }
            console.log(leftm+"---"+rightm)
            //拆分分结束

            //拆分秒
            let lefts = "";
            let rights = "";
            let ss = s+""
            if(s>10){
                for (let i = 0; i < ss.length; i++) {
                    lefts = ss[0];
                    rights = ss[1];
                    if(lefts == undefined){
                        lefts = 0+""
                    }
                } 
            }else if(s === 10){
                    rights = 0+"";
                    lefts = 1+""
            }else{
                for (let i = 0; i < ss.length; i++) {
                    rights = ss[0];
                    lefts = 0+""
                } 
            }
            console.log(lefts+"---"+rights)
            //拆分秒结束
            console.log("------------------------------------------------")
            this.setState({
                d:d,
                h:h,
                m:m,
                s:s,
                leftd:leftd,
                rightd:rightd,
                lefth:lefth,
                righth:righth,
                leftm:leftm,
                rightm:rightm,
                lefts:lefts,
                rights:rights
            })
            
            
            
            
            
            
            
            //console.log(d+"天"+h+"时"+m+"分"+s+"秒")
            // console.log(h)
            // console.log(m)
            // console.log(s)
        }, 1000);
    }

    handleClick = (params) => {
        this.props.history.push("/searchCenter");
    }

    render() {
        const {d,h,m,s,leftd,rightd,lefth,righth,leftm,rightm,lefts,rights} = this.state;
        return (
            <div className="app">
                <h2>优惠使用说明</h2>
                <h3>{`${d<10?"0"+d:d}天${h<10?"0"+h:h}时${m<10?"0"+m:m}分${s<10?"0"+s:s}秒`}</h3>
                <div style={{marginTop:50,marginLeft:20}}>
                    <h3 style={{width:"100%",height:100}}><span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                    }}>{leftd}</span><span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                        marginLeft:5
                    }}>{rightd}</span><span style={{fontSize:20}}>天</span>
                    <span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                    }}>{lefth}</span><span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                        marginLeft:5
                    }}>{righth}</span><span style={{fontSize:20}}>时</span><span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                    }}>{leftm}</span><span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                        marginLeft:5
                    }}>{rightm}</span><span style={{fontSize:20}}>分</span><span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                    }}>{lefts}</span><span style={{
                        width:30,height:55,
                        background:"rgb(64, 64, 64)",
                        color:"#fff",display:"inline-block",
                        flexDirection:"row",justifyContent:"center",
                        fontSize:34,borderRadius:6,paddingLeft:5,paddingTop:5,fontWeight:"normal",
                        marginLeft:5
                    }}>{rights}</span><span style={{fontSize:20}}>秒</span>
                     </h3> 


                </div>
            </div>
        )
    }
}
export default withRouter(CouponGuide)