js获取验证码秒表效果（原创）-优快云博客

本文介绍了一种利用jQuery实现网页上验证码倒计时功能的方法，通过点击按钮或链接触发倒计时，实现获取验证码后的重发限制。代码详细展示了如何设置倒计时、禁用按钮以及在倒计时结束后恢复按钮状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<input type="button" onclick="setclock($(this),5);"  value="获取验证码">
<a href="javascript:void(0);">获取验证码</a>

<script>
$("a").click(function(){
    setclock($(this),5);
});

function setclock(dom,value,text,type)
{
    value=arguments[1]||60; 
    text=arguments[2]||"s后重发验证码"; 
    type=arguments[3]||"other"; 
    
    //if(type!="other"||dom.attr("disabled")!="disabled")
    if(!(type=="other"&&dom.attr("disabled")=="disabled"))
    {
        dom.attr("disabled","disabled");
        if(dom[0].nodeName=='INPUT')
        {
            jQuery.prototype.comValue=jQuery.prototype.val;    
        }else
        {
            jQuery.prototype.comValue=jQuery.prototype.text;                
        }
        
        if(!dom.attr("data-clock"))
        {
            dom.attr("data-dvalue",dom.comValue());
            value--;
            dom.attr("data-clock",value);
            dom.comValue(value+text);
        }else
        {        
            var thisValue=parseInt(dom.attr("data-clock"))-1;
            dom.attr("data-clock",thisValue);
            dom.comValue(thisValue+text);
        }
        
        if(parseInt(dom.attr("data-clock"))>0)
        {
            setTimeout(function(){setclock(dom,value,text,"self")},1000);
        }else
        {
            dom.removeAttr("disabled");
            
            dom.removeAttr("data-clock");        
            dom.comValue(dom.attr("data-dvalue"));        
        }
    }
}
</script>