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實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了基于jQuery實現(xiàn)文字打印動態(tài)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
jquery實現(xiàn)仿新浪微博帶動畫效果彈出層代碼(可關(guān)閉、可拖動)
這篇文章主要介紹了jquery實現(xiàn)仿新浪微博帶動畫效果彈出層代碼,具有可關(guān)閉及可拖動的功能,涉及jQuery針對鼠標事件的響應(yīng)及頁面元素屬性的變換功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
jQuery插件HighCharts實現(xiàn)的2D條狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D條狀圖效果,結(jié)合完整實例形式詳細分析了jQuery插件HighCharts繪制2D條狀圖的操作步驟與相關(guān)屬性設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Jquery 獲取相同NAME 或者id刪除行操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
下面小編就為大家?guī)硪黄猨query跟隨屏幕滾動效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕
這篇文章主要介紹了jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕,需要的朋友可以參考下2015-11-11
用jQuery來判斷瀏覽器的類型,主要是使用$.browser這個工具類2011-04-04
jQuery對checkbox 復(fù)選框的全選全不選反選的操作
這篇文章主要介紹了jQuery對checkbox 復(fù)選框的全選全不選反選的操作 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jquery validationEngine中使用ajax驗證不通過也提交表單問題處理,需要的朋友可以參考下2014-12-12