如何在react中实现一个倒计时组件

倒计时组件

import React, {

Component

} from 'react'

import $ from 'jquery'

import "../../css/spellTEPayPublic/countDown.css"

export default class countDown extends Component{

constructor(props){

super(props);

this.state={

day:1,

hour:0,

minute:0,

second:0,

millisecond:0

}

}

componentDidMount(){

let endTime= this.props.msg.endTime.replace(/-/g, "/");

countFun(endTime);

}

render(){

return(

距离本团结束剩余0天

0

:

0

:

0

)

}

}

function countFun(time){

//if(typeof end_time == "string")

var end_time = new Date(time).getTime(),//月份是实际月份-1

//current_time = new Date().getTime(),

sys_second = (end_time-new Date().getTime());

var timer = setInterval(function(){

if (sys_second > 0) {

sys_second -= 10;

var day = Math.floor((sys_second /1000/ 3600) / 24);

var hour = Math.floor((sys_second /1000/ 3600) % 24);

var minute = Math.floor((sys_second /1000/ 60) % 60);

var second = Math.floor(sys_second/1000 % 60);

var haomiao = Math.floor(sys_second%1000);

		$(".day").text(day);//计算天
        $(".hour").text(hour<10?"0"+hour:hour);//计算小时
        $(".minute").text(minute<10?"0"+minute:minute);//计算分
        $(".second").text(second<10?"0"+second+"."+haomiao:second+"."+haomiao);// 计算秒
    } else {
        clearInterval(timer);
    }
}, 10);

}