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.效果圖
總結
以上所述是小編給大家介紹的jQuery 點擊獲取驗證碼按鈕及倒計時，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
