jQuery 點擊獲取驗證碼按鈕及倒計時功能
更新時間：2018年09月20日 10:29:13 作者：dingFY_Demi
驗證碼倒計時功能，在前端開發(fā)中經(jīng)常會遇到，下面小編給大家?guī)砹薺Query 點擊獲取驗證碼按鈕及倒計時功能，感興趣的朋友跟隨小編一起看看吧
1.具體思路
點擊獲取驗證碼按鈕 —> 調(diào)用獲取驗證碼接口（忽略）—>獲取驗證碼按鈕切換到不可點擊狀態(tài)，按鈕背景色呈灰色，按鈕文字呈現(xiàn)為“倒計時秒數(shù)+后可重新獲取”—> 倒計時60s后按鈕恢復(fù)可點擊狀態(tài)，按鈕背景呈橙色，按鈕文字呈現(xiàn)為“重新發(fā)送”
2.HTML代碼
<button type="button" class="feachBtn">獲取驗證碼</button>
3.JS代碼
// 點擊獲取驗證碼操作
$('.feachBtn').click(function() {
let count = 60;
const countDown = setInterval(() => {
if (count === 0) {
$('.feachBtn').text('重新發(fā)送').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.效果圖
總結(jié)
以上所述是小編給大家介紹的jQuery 點擊獲取驗證碼按鈕及倒計時，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery針對input的class屬性寫了多個值情況下的選擇方法
這篇文章主要介紹了jQuery針對input的class屬性寫了多個值情況下的選擇方法,結(jié)合實例形式對比分析了jQuery選擇器針對class屬性中有多個值情況下的選中方法,需要的朋友可以參考下2016-06-06
下面小編就為大家?guī)硪黄獪\談jQuery 中的事件冒泡和阻止默認行為。小編舉得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery隊列控制方法詳解queue()/dequeue()/clearQueue()
jQuery核心中, 有一組隊列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續(xù)按序執(zhí)行的函數(shù)的控制可以說是簡明自如, 主要應(yīng)用于animate ()方法, ajax以及其他要按時間順序執(zhí)行的事件中.2010-12-12
這篇文章主要介紹了JS中判斷null、undefined與NaN的方法,需要的朋友可以參考下2014-03-03
jQuery利用cookie 實現(xiàn)本地收藏功能(不重復(fù)無需多次命名)
cookie 是存儲于訪問者計算機中的變量。這篇文章主要介紹了jQuery利用cookie 實現(xiàn)本地收藏功能不重復(fù)無需多次命名,需要的朋友可以參考下2019-11-11
淺談EasyUi ComBotree樹修改 父節(jié)點選擇的問題
下面小編就為大家?guī)硪黄獪\談EasyUi ComBotree樹修改 父節(jié)點選擇的問題。2016-11-11
這篇文章主要為大家詳細介紹了jquery實現(xiàn)計算器小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
ID是html頁面中一些元素都可以有個本頁面唯一的id包括如,div,input,iframe等等都是可以的,下面我來給大家介紹利用jquery 獲取id值方法,有需要了解的朋友可參考2013-09-09
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)滑動開關(guān)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
基于jquery的3d效果實現(xiàn)代碼，需要的朋友可以參考下。2011-03-03