jQuery 點擊獲取驗證碼按鈕及倒計時功能

來源：懂視網責編：小采時間：2020-11-27 22:07:17

jQuery 點擊獲取驗證碼按鈕及倒計時功能

jQuery 點擊獲取驗證碼按鈕及倒計時功能:1.具體思路點擊獲取驗證碼按鈕 —> 調用獲取驗證碼接口（忽略）—>獲取驗證碼按鈕切換到不可點擊狀態，按鈕背景色呈灰色，按鈕文字呈現為倒計時秒數+后可重新獲取—> 倒計時60s后按鈕恢復可點擊狀態，按鈕背景呈橙色，按鈕文字呈現為重新發

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery 點擊獲取驗證碼按鈕及倒計時功能:1.具體思路點擊獲取驗證碼按鈕 —> 調用獲取驗證碼接口（忽略）—>獲取驗證碼按鈕切換到不可點擊狀態，按鈕背景色呈灰色，按鈕文字呈現為倒計時秒數+后可重新獲取—> 倒計時60s后按鈕恢復可點擊狀態，按鈕背景呈橙色，按鈕文字呈現為重新發

1.具體思路

點擊獲取驗證碼按鈕 —> 調用獲取驗證碼接口（忽略）—>獲取驗證碼按鈕切換到不可點擊狀態，按鈕背景色呈灰色，按鈕文字呈現為“倒計時秒數+后可重新獲取”—> 倒計時60s后按鈕恢復可點擊狀態，按鈕背景呈橙色，按鈕文字呈現為“重新發送”

2.HTML代碼

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

3.JS代碼

// 點擊獲取驗證碼操作
 $('.feachBtn').click(function() {
 let count = 60;
 const countDown = setInterval(() => {
 if (count === 0) {
 $('.feachBtn').text('重新發送').removeAttr('disabled');
 $('.feachBtn').css({
 background: '#ff9400',
 color: '#fff',
 });
 clearInterval(countDown);
 } else {
 $('.feachBtn').attr('disabled', true);
 $('.feachBtn').css({
 background: '#d8d8d8',
 color: '#707070',
 });
 $('.feachBtn').text(count + '秒后可重新獲取');
 }
 count--;
 }, 1000);
 }
 });

4.效果圖