React中实现倒计时功能根据接口防止刷新

该博客介绍了如何在React组件中根据接口返回的毫秒数实现倒计时功能,将时间转换为分钟和秒,并在状态中更新显示。当时间归零时,显示订单过期信息。通过`componentDidMount`生命周期方法调用`timeTransition`函数,每秒更新状态。修正版的时间转换还包括了天、小时、分钟和秒的详细显示。
摘要由CSDN通过智能技术生成

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秒

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值