美文网首页
点击按钮,发送验证码,出现60s倒计时

点击按钮,发送验证码,出现60s倒计时

作者: codingRaabit2 | 来源:发表于2018-03-24 12:13 被阅读30次
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题文档</title> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    </head> 
    
    <body> 
    <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
    <script type="text/javascript"> 
    var countdown=60; 
    function settime(val) { 
    if (countdown == 0) { 
    val.removeAttribute("disabled");    
    val.value="免费获取验证码"; 
    countdown = 60; 
    } else { 
    val.setAttribute("disabled", true); 
    val.value="重新发送(" + countdown + ")"; 
    countdown--; 
    } 
    setTimeout(function() { 
    settime(val) 
    },1000) 
    } 
    </script> 
    </body> 
    </html> 
    

    或者

    var fewSeconds = 5;
    $('#btn').click(function(){
        // Ajax request
        var btn = $(this);
        btn.prop('disabled', true);
        setTimeout(function(){
            btn.prop('disabled', false);
        }, fewSeconds*1000);
    });
    

    相关文章

      网友评论

          本文标题:点击按钮,发送验证码,出现60s倒计时

          本文链接:https://www.haomeiwen.com/subject/kirqcftx.html