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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM