zoukankan      html  css  js  c++  java
  • 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秒
  • 相关阅读:
    Delphi的几个跨平台小游戏例子。
    Delphi判断某个类是否实现了某个接口
    Delphi RAD Server 应用服务基础平台
    Delphi XE10.1 引用计数
    运行Delphi XE10的MongoDB例程,测试Delphi插入记录性能
    在Windows下编译mongo-c-driver 1.3.x
    Delphi 高效读写锁
    Delphi XE10在 Android下调用静态库a文件
    Delphi 调试连接 任意Android手机/平板/盒子
    Some cool FireMonkey multi-device components
  • 原文地址:https://www.cnblogs.com/lllomh/p/14991877.html
Copyright © 2011-2022 走看看