多状态下支付倒计时

最新推荐文章于 2021-04-13 12:17:56 发布

米斯特肖

最新推荐文章于 2021-04-13 12:17:56 发布

阅读量211

点赞数

分类专栏：前端 jquery js

本文链接：https://blog.csdn.net/xkqbaiyuan/article/details/103986534

版权

前端同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

本文详细探讨了在支付过程中如何处理多种状态的倒计时问题，包括待支付、支付中和支付失败等状态的切换与显示，确保用户能够清晰了解支付流程的实时状态。

摘要由CSDN通过智能技术生成

多状态下支付倒计时

<div class="headBox" id="headBox">
<!-- 待发货状态下显示   -->
    <div class="status" id="unfilled_orders">
        <div class="sta">
            <span class="staName">待发货</span>
        </div>
        <p>买家已付款，卖家未发货</p>
    </div>

<!--  已取消状态下显示  -->
    <div class="status" id="canceled">
        <div class="sta">
            <span class="staName">已取消</span>
        </div>
        <p>该订单已取消</p>
    </div>


<!--  待支付状态下显示  -->
    <div class="status" id="unpaid">
        <div class="sta">
            <span class="staName">待付款</span>
            <span class="peice">￥780.00元</span>
        </div>
        <p id="timer">等待买家付款，剩余15分00秒 </p>
    </div>
</div>

 $(document).ready(function(){
     if($('#timer').length>0){
         console.log('存在执行')
         timer()
     }else {
         console.log('不存在')
     }

});


var maxtime = 15 * 60;
function CountDown() {
    if (maxtime >= 0) {
        minutes = Math.floor(maxtime / 60);
        seconds = Math.floor(maxtime % 60);
        msg = "等待买家付款，剩余" + minutes + "分" + seconds + "秒";
        $('#timer').text(msg)
        --maxtime;
    } else {
        clearInterval(timer);
        $('#unpaid div').replaceWith('<span class="staName">交易关闭</span>')
        $('#timer').text('订单超时，交易已关闭')
        $('.newFoot').hide()
    }
}

function timer(){
    setInterval("CountDown()", 1000);
}