js验证码倒计时

2021-06-23 10:06

阅读:466

标签:setattr   settime   获取   color   his   验证码   element   attr   btn   

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(wait10){
            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验证码倒计时

标签:setattr   settime   获取   color   his   验证码   element   attr   btn   

原文地址:http://www.cnblogs.com/zywaf/p/7162042.html


评论


亲,登录后才可以留言!