zoukankan      html  css  js  c++  java
  • react中实现倒计时功能

    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;
  • 相关阅读:
    计算机的组成与操作系统
    面向对象初识
    规范化目录
    装饰器进阶
    装饰器练习
    装饰器
    内置函数二 闭包
    生成器 推导式 练习
    迭代器 递归 格式化 练习
    生成器 推导式 内置函数
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13502253.html
Copyright © 2011-2022 走看看