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>
  • 相关阅读:
    MATLAB计算机视觉与深度学习实战
    硬件创业:从产品创意到成熟企业的成功路线图
    Xcode5 创建模板和UIView 关联XIB
    iOS Development: Proper Use of initWithNibName:bundle: Affects UITableViewController
    自定义UIViewController与xib文件关系深入分析
    UIViewController XIB/NIB加载过程
    ios多视图开发中:xib与UIViewController的关联
    UIAlertView、UIActionSheet兼容iOS8
    Xcode6中怎么添加空工程模板
    [OC Foundation框架
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/10635269.html
Copyright © 2011-2022 走看看