js验证码倒计时

Posted 2020-09-28 Mr.Y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js验证码倒计时相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码的倒计时</title>
    <style type="text/css">
        *{ margin: 0; padding: 0}
        #btn{
                background: #fff; 
                border-radius: 20%; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color: #fff; 
                margin: 100px auto; 
                height: 50px; 
                width: 150px;
                color: #000;
            }
        #btn.set {
            background: #666;
            color: #fff;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=12;
function time(o) {
    if (wait == 0) {
        o.removeAttribute("disabled");
        o.className = "";
        o.value="免费获取验证码";
        wait = 12;
    }
    else {
        if(wait<10){
            o.value="重新发送(0"+wait+")";
            wait--;
            setTimeout(function() {
                time(o)
            },1000)
        }
        else{
            o.setAttribute("disabled", true);
            o.className = "set";
            o.value="重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                time(o)
            },1000)
        }
    }
}
document.getElementById("btn").onclick=function(){
    time(this);
}  
</script>
</body>
</html>

发送验证码倒计时效果

以上是关于js验证码倒计时的主要内容，如果未能解决你的问题，请参考以下文章

js 验证码倒计时60秒

js实现验证码倒计时效果

Angular.js 使用获取验证码按钮实现-倒计时

C#实现发送验证码倒计时60秒

js实现发送验证码倒计时按钮

jQuery手机发送验证码倒计时代码