欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論