1. 程式人生 > >Jquery 點選獲取驗證碼按鈕, 倒計時

Jquery 點選獲取驗證碼按鈕, 倒計時

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.效果圖