溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 點擊獲取驗證碼按鈕及倒計時，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
