zoukankan      html  css  js  c++  java
  • web前端处理订单待支付倒计时计算显示问题

    在商城类项目的时候,有很多待支付的订单,有时候在订单列表页面会分别显示倒计时,就是页面会有很多倒计时的订单。

    处理方法:

    1.调用后端接口拿到所有的订单,获取所有的倒计时订单,获取到期时间(尽量时间戳,不行就自己转换)。

    2.渲染列表的时候把未支付的订单加上计数器dom,然后把到期时间戳写在dom属性里面。

    3.在计时器里面轮询 计时器dom,获取到期时间戳减去当前时间,然后计算出要显示的时间,从新修改计数器dom。

    4.如果到期了就改变订单状态,如果这个时候如果dom过多处理起来或许会有延迟,但是也就差一丢丢,后端也会做超时取消的,前后端都做。

    5.如果后端不做的话,就是前端拿到超时订单,先修改dom,然后在用这个订单号调接口让后端修改这个订单状态。

    (后端有时候不会这样给,有时候是给你下单时间,然后自定义个倒计时15分钟,或者半小时,到期调接口改状态,这个时候就得自己计算出来到期时间戳了)

    附上自己写的倒计时计时器:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="order-daojishi-time"></div>
    </body>
    <script>
    function timeStamp(second_time){  
        if(second_time<=0){
            return;
        }
        var time = '<div><p><span>00</span>天</p><p><span>00</span>时<span>00</span>分<span>'+parseInt(second_time)+'</span>秒</p></div>';  
        if( parseInt(second_time )> 60){  
            var second = parseInt(second_time) % 60;  
            var min = parseInt(second_time / 60);  
            time = '<div><p><span>00</span>天</p><p><span>00</span>时<span>'+min+'</span>分<span>'+second+'</span>秒</p></div>';   
            if( min > 60 ){  
                min = parseInt(second_time / 60) % 60;  
                var hour = parseInt( parseInt(second_time / 60) /60 );  
                time = '<div><p><span>00</span>天</p><p><span>'+hour+'</span>时<span>'+min +'</span>分<span>'+second +'</span>秒</p></div>';  
                if( hour > 24 ){  
                    hour = parseInt( parseInt(second_time / 60) /60 ) % 24;  
                    var day = parseInt( parseInt( parseInt(second_time / 60) /60 ) / 24 );  
                    time = '<div><p><span>'+day+'</span>天</p><p><span>'+hour+'</span>时<span>'+min +'</span>分<span>'+second +'</span>秒</p></div>';                               
                }  
            }  
        }  
        return time;          
    }  
    setInterval(function(){
        var expireTime = 1554089218000;//订单过期时候的时间戳,或者是一个其它时间,这里灵活处理
        var houtime = Number(expireTime-Date.parse(new Date()))/1000;//
        console.log(Date.parse(new Date()))
        document.getElementById('order-daojishi-time').innerHTML = timeStamp(houtime);
    },1000)
    
    </script>
    
    </html>
  • 相关阅读:
    use paramiko to connect remote server and execute command
    protect golang source code
    adjust jedi vim to python2 and python3
    install vim plugin local file offline
    add swap file if you only have 1G RAM
    datatables hyperlink in td
    django rest framework custom json format
    【JAVA基础】网络编程
    【JAVA基础】多线程
    【JAVA基础】String类的概述和使用
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/10635269.html
Copyright © 2011-2022 走看看