文章出處

通常做注冊頁面時會有獲取驗證碼按鈕，然后點擊后過60秒才能重新獲取，比如現在項目中遇到的

然后點擊后的樣式，并且數字是遞減的，到0時重新回到最初的狀態（上圖）。

首先構造HTML結構

<button class="getCode">獲取驗證碼</button>

 

css就略了

JS實現：

var wait=60;
        function time(o){
            if (wait==0) {
                o.removeAttribute("disabled");    
                o.innerHTML="輸入驗證碼";
                o.style.backgroundColor="#fe9900";
                wait=60;
            }else{
                o.setAttribute("disabled", true);
                o.innerHTML=wait+"秒后重新獲取";
                o.style.backgroundColor="#8f8b8b";
                wait--;
                setTimeout(function(){
                    time(o)
                },1000)
            }
        }

最后點擊按鈕，調用time方法：

$(".getCode").click(function(){
            time(this);
        });

 

至此全部功能全部完畢。

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄