js中倒计时实现

项目中获取验证码需要进行倒计时。
这里使用的是JavaScript Date 对象。
Date 对象用于处理日期和时间。

相关函数的使用说明可以参考在这里

代码实例

当获取验证码的按键按下时进行处理。

$(function(){
    $("#getPhoneNumValidateBtn").click(function(){
        console.log("time display" );
        endTime =  new Date().getTime() + 60 * 1000;
        showCountdownTime();
        return false;
    });
});
function showCountdownTime(){
    var startTime = new Date().getTime();

    var timeDiff =  endTime - startTime;//ms
    var countDownTime =  Math.floor(timeDiff/1000 + 0.5 );
    console.log("" + countDownTime + "秒后重新获取验证码");

    setTimeout("showCountdownTime()",1000);
}

说明

endTime =  new Date().getTime() + 60 * 1000;

getTime()函数是返回 1970 年 1 月 1 日至今的毫秒数。
因为设定的是60s的倒计时。因此又加了（60x1000）ms 的时间。

showCountdownTime用于处理倒计时。

var timeDiff =  endTime - startTime;//ms

这个是获取截止时间与当前时间的时间差。

var countDownTime =  Math.floor(timeDiff/1000 + 0.5 );

countDownTime为倒计时时间（s）,使用 Math.floor()进行取整。
这里需要注意的地方是floor()函数处于向下取整，因此需要在计算结果上加上0.5再进行取整运算。

Math.floor(11.9)  结果为 11 
Math.floor(11.2)  结果也为 11 

使用setTimeout进行定时操作。
这里设定1000ms后调用函数showCountdownTime()

setTimeout("showCountdownTime()",1000);