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


    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秒
  • 相关阅读:
    echarts折线图
    利用echarts制作词云
    本周总结
    本周总结
    云服务器项目数据库连接超时问题解决
    iOS下载图片失败
    解决后台json数据返回的字段需要替换的问题
    设置User Agent
    Xcode升级到9.3之后pod问题
    gitLab创建自己的私有库
  • 原文地址:https://www.cnblogs.com/lllomh/p/14991877.html
Copyright © 2020-2023  润新知