验证码倒计时,不受页面刷新影响

将点击时的时间存入localStorage,与现在的时间进行比较,这样刷新也不会影响倒计时了。

var timer; //timer变量,控制时间
var curCount;//当前剩余秒数
function sendMessage() {
    curCount = getCount();
    //设置button效果,开始计时
    $("#btnSendCode")[0].disabled = true;
    $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
    timer = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
}

//timer处理函数
function SetRemainTime() {
    if (curCount == 0) {
        window.clearInterval(timer);//停止计时器
        flag = true;
        $("#btnSendCode").disabled = false;//启用按钮
        $("#btnSendCode").val("重新发送验证码");
    }
    else {
        curCount--;
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
    }
}

//通过localStorage获取还剩多少时间
 function getCount() {
    var now=new Date().getTime();    
    if(localStorage.getItem('origTime')){
        var old=localStorage.getItem('origTime');
        var remainTime=(now - old)/1000;
        //45是设定的倒计时,
        if(remainTime<=45){
            //剩下多少秒
            return parseInt(45-remainTime);
        }else{
            localStorage.setItem('origTime',now);
            return 45;
        } 
    }else{
        localStorage.setItem('origTime',now);
        return 45;  
    }
    
 }
//点击事件
$("#btnSendCode").on('click',function(){
    sendMessage();
});
原文地址:https://www.cnblogs.com/liaozhenting/p/6855979.html