js獲取驗證碼倒計時

時間 2019-11-11

原文原文鏈接

獲取驗證碼倒計時javascript

<!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: 10px; 
                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=30;
function time(o) {
    if (wait == 0) {
        o.removeAttribute("disabled");
        o.className = "";
        o.value="免費獲取驗證碼";
        wait = 30;
    }
    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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。