js实现页面倒计时效果

来源：互联网发布：中国十佳网络教育机构编辑：程序博客网时间：2024/04/25 20:30

经常需要在页面上倒计时的效果，一般来说倒计时的时间，也就是“限制时间”，应该在后台计算。然后初始化到控件上，然后启动倒计时程序。

所以第一步就是

$(function(){

     $.ajax({

        ...                              //(从后台取值，然后赋值逻辑)<span style="font-family: Arial, Helvetica, sans-serif;">    </span>

<span style="font-family: Arial, Helvetica, sans-serif;">               setTimeout("Times()",1000);                //启动计时器</span>

      }）

第二部就是计时器里面的逻辑了。这里的倒计时只有分钟和秒

//30分钟倒计时function Times(){    var tempTime=$("#currTime").text().split(":");    var minute=tempTime[0];    var second=tempTime[1];    if(second>=1){        second=(second-1>9)?(second-1):"0"+(second-1);    }else{        second="59";        if(minute>=1){            minute=(minute-1>9)?(minute-1):"0"+(minute-1);        }else{             minute="00";        }    }    $("#currTime").text(minute+":"+second);        if(minute==0&&second==0){        $("#paynow").removeClass("payBtn");                $("#paynow").addClass("payBtnGrey");                $("#paynow").attr("disabled","disabled");                    var id = $("#orderId").val();    $.ajax({            type: "post",            url: "XXX",            dataType: "text",            data:{"XXX},            success: function(){                $("#prompt").text("XXX超时，系统已自动XXX！");                        $("#prompt").css("color","#cc0000");            }        });            }else{        setTimeout("Times()",1000);    }}

0 0