jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能

更新時(shí)間：2018年09月20日 10:29:13 作者：dingFY_Demi

驗(yàn)證碼倒計(jì)時(shí)功能，在前端開(kāi)發(fā)中經(jīng)常會(huì)遇到，下面小編給大家?guī)?lái)了jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能，感興趣的朋友跟隨小編一起看看吧

1.具體思路

點(diǎn)擊獲取驗(yàn)證碼按鈕 —> 調(diào)用獲取驗(yàn)證碼接口（忽略）—>獲取驗(yàn)證碼按鈕切換到不可點(diǎn)擊狀態(tài)，按鈕背景色呈灰色，按鈕文字呈現(xiàn)為“倒計(jì)時(shí)秒數(shù)+后可重新獲取”—> 倒計(jì)時(shí)60s后按鈕恢復(fù)可點(diǎn)擊狀態(tài)，按鈕背景呈橙色，按鈕文字呈現(xiàn)為“重新發(fā)送”

2.HTML代碼

<button type="button" class="feachBtn">獲取驗(yàn)證碼</button>

3.JS代碼

// 點(diǎn)擊獲取驗(yàn)證碼操作
  $('.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 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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