前端Javascript验证码60s倒计时

前端Javascript验证码60s倒计时

【引言】

因为业务需要,同时避免为了安全和费用考虑,我写了一个前端Javascript验证码60S倒计时的验证。以防止用户反复提交。

【代码】

//请求服务器发送验证码,60后刷新
document.getElementById("phoneSendCheck").addEventListener('touchend',function(){
    
    if(document.getElementById("phoneSendCheck").disabled){
        return false;
    }
    
    var time = 60;
    
    function setTime(){
    
        if(time==0){
    
            time = 60;//60秒过后button上的文字初始化,计时器初始化
            document.getElementById("phoneSendCheck").disabled = false;
            document.getElementById("phoneSendCheck").value = "重新获取";
            return;

        }else{
    
            document.getElementById("phoneSendCheck").disabled = true;
            document.getElementById("phoneSendCheck").style.color = "#000";
            document.getElementById("phoneSendCheck").value = "";
    
            if(time%2 == 0){    //求余为偶
    
                restTime = time +'s . .';
    
            }else{
    
                restTime = time +'s . . .';
    
            }
    
            document.getElementById("phoneSendCheck").value = restTime;
            time--;
    
        }
    
        setTimeout(function() { setTime() },1000) //每1000毫秒执行一次
    
    }
    
    setTime();
    
    //...

});

【效果如下】

仅为测试图:

1.jpg


回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置

发布时间:2020-03-22 10:34:29

修改时间:2020-03-22 10:37:20

查看次数:76

评论次数:0