天天看點

jQuery 實作發送驗證碼的倒計時

很多網站在注冊界面經常要擷取驗證碼需求。擷取驗證碼都會出現一個驗證碼倒計時,一般都是60秒倒計時,要是等待過了這個60秒的倒計時,又可以重新發送驗證碼。今天就來說說用jQuery如何才能實作倒計時!有需求的夥伴們可以看看!

首先我們來看看效果圖:

jQuery 實作發送驗證碼的倒計時

點選擷取驗證碼後出現60秒的重發倒計時

jQuery 實作發送驗證碼的倒計時

當倒計時結束後,出現重發的按鈕,以此循環

jQuery 實作發送驗證碼的倒計時

實作的代碼:

HTML(由于是項目中的頁面,是以隻能截取重要的部分代碼,諒解):

jQuery 實作發送驗證碼的倒計時

jQuery實作發送驗證碼的倒計時代碼

CSS 樣式你們自己美化就 OK,這裡就不一一展示;

JS代碼:

jQuery 實作發送驗證碼的倒計時

countdown設定倒計時的秒數從多少開始,然後依次遞減,當倒計時為0時候,按鈕中的文字就變為“重發”然後重置倒計時秒數為初始的60秒!倒計時不為0的時候就依次遞減,定義了一個定時器在循環!