js实现支付页面的倒计时

    一般涉及到电商的都会涉及到倒计时，比如下单后在30min中付款，预售商品倒计时开始，秒杀倒计时等等，都需要显示倒计时作为提示，下面是一个简单的实现。

html部分：

<div id="remainTime" style="font-size:12px;font-weight:600;color:#FF5722;></div>

JavaScript部分 

<script>
//支付剩余时间倒计时
$(function(orderDate){  //orderDate是订单生效时间，后台的Date类型传到前端成了毫秒
    var now=new Date();
    var end=new Date(orderDate+30*60*1000);  //提交订单的时间+30min就是订单失效时间，后台Date传过来变成了毫秒

    /*两个时间相减,得到的是毫秒ms,变成秒*/
    var result=Math.floor(end-now)/1000; //result= 30*60s;
    var interval=setInterval(sub,1000); //定时器 调度对象
    /*封装减1秒的函数*/
    function sub(){
        if (result>1) {
            result = result - 1;
            var second = Math.floor(result % 60);     // 计算秒 ，取余
            var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
            //var hour = Math.floor(result/1000/60/60%24);  //计算小时，这里最长只有30min，用不着
            //var day = Math.floor(result/1000/60/60/24);   //计算天，这里最长只有30min，用不着
            $("#remainTime").html("支付剩余时间：" + minite + "分" + second + "秒");
        } else{
            //这里可以添加倒计时结束后需要执行的事件
            alert("未在规定时间内支付，订单已失效！");
            window.clearInterval(interval);  
            //TODO 订单失效后的一些列操作：更改订单状态的同时回库存
        }
    };
});
</script>

效果： 

30min到了之后：