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秒
  • 相关阅读:
    layui的table中日期格式转换
    动态数据网站
    卷积的微分以及积分性质
    傅里叶变换时域积分性质
    矩阵导数的一些笔记
    3层模式下长时间调用的进度条提示方案
    有限区域内的孤立点(极点,有限阶0点)数量有限。
    关于复变函数积分--原函数法
    android 获取文本框回车输入
    企业网络搭建
  • 原文地址:https://www.cnblogs.com/lllomh/p/14991877.html
Copyright © 2011-2022 走看看