react中实现根据接口返回的毫秒数,显示倒计时:还剩于00分00秒

import React,{ Component } from 'react';
class OrderDetail extends Component{
    constructor(props){
        super(props)
        this.state={
            msg:""
        }
    }
    timeTransition = (ms) => {
        let maxtime = ms / 1000; //按秒计算
        let timer = null;
        let _this = this;
        setTimeout(function f(){
            if (maxtime >= 0) {
                let minutes = Math.floor(maxtime / 60);
                let seconds = Math.floor(maxtime % 60);
                minutes < 10 ? minutes = '0' + minutes : minutes = minutes;
                seconds < 10 ? seconds = '0' + seconds : seconds = seconds;
                let msg = "请在 <em>" + minutes + "分" + seconds + "秒</em> 内完成支付";
                _this.setState({
                    msg
                });
                --maxtime;
            } else{
                _this.setState({
                    msg:'订单已过期,请重新下单'
                });
                clearTimeout(timer);
                return;
            }
            timer = setTimeout(f,1000);
        },1000);
    }
    componentDidMount(){
        this.timeTransition(20000);//根据接口返回的时间
    }
}
export default OrderDetail;

时间转换修正:

     timeTransition = (ms) => {
         let maxtime = ms / 1000; //按秒计算
         let timer = null;
         let _this = this;
         console.log(maxtime)
         setTimeout(function f(){
             if (maxtime >= 0) {

                 var day = Math.floor( maxtime/ (24*3600) ); // Math.floor()向下取整
                 var hour = Math.floor( (maxtime - day*24*3600) / 3600);
                 var minute = Math.floor( (maxtime - day*24*3600 - hour*3600) /60 );
                 var second = maxtime - day*24*3600 - hour*3600 - minute*60;
                 let msg = "请在 <em>"+day+'天'+hour+'时'+ minute + "分" + second + "秒</em> 内完成支付";
                 console.log(msg)
                 _this.setState({
                     day:day,
                     hour:hour,
                     minutes:minute,
                     seconds:second
                 });
                 --maxtime;
             } else{
                 _this.setState({
                     msg:'订单已过期,请重新下单'
                 });
                 clearTimeout(timer);
                 return;
             }
             timer = setTimeout(f,1000);
         },1000);
     }
function secondsFormat( s ) {  //换算参考  上面并没调用这个方法
    var day = Math.floor( s/ (24*3600) ); // Math.floor()向下取整 
    var hour = Math.floor( (s - day*24*3600) / 3600); 
    var minute = Math.floor( (s - day*24*3600 - hour*3600) /60 ); 
    var second = s - day*24*3600 - hour*3600 - minute*60; 
    return day + "天"  + hour + "时" + minute + "分" + second + "秒"; 
}
console.log(secondsFormat(5555555)) // 64天7时12分35秒
console.log(secondsFormat(1234))  // 0天0时20分34秒

 

posted on 2020-10-15 17:02  lllomh  阅读(106)  评论(0编辑  收藏  举报