點擊按鈕,然后實現30S倒計時


點擊按鈕的之后,按鈕進行30S倒計時

HTML

<input type="button" id="getCode" name="" value="獲取驗證碼" class="btnCode"/>

CSS

.btnCode {
    width: 40%;
    height: 42px; 
    background: #FFF; 
    color: #323333;
    font-size: 14px;
    line-height: 42px; 
}

.btnCodeDisabled {
    background: #ccc; 
}

JS

$(function(){
  var wait=30;
    function time(obj) {
            if (wait == 0) {
                obj.className='btnCode';
                obj.removeAttribute("disabled");            
                obj.value="";
                wait = 30;
            } else {
                obj.className='btnCodeDisabled';//按鈕變灰,不可點擊
                obj.setAttribute("disabled", true);
                obj.value="重新發送("+ wait +")";
                wait--;
                setTimeout(function() {
                    time(obj)
                },
                1000)
            }
        }
            document.getElementById("getCode").onclick=function(){time(this);}
   })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM