Jquery 點選獲取驗證碼按鈕, 倒計時
阿新 • • 發佈:2018-12-13
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.效果圖
|