js验证码倒计时

最新推荐文章于 2022-09-01 14:38:13 发布

a6617681

最新推荐文章于 2022-09-01 14:38:13 发布

阅读量118

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zywaf/p/7162042.html

版权

<!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>