jQuery 인증 코드 보 내기 제어 단추 비활성화 기능 구현

2225 단어 jquery단추 사용 안 함인증번호
필요 효과:인증 코드 를 보 내 려 면 단 추 를 누 르 면 사용 하지 않 고 5 초 후에 사용 하지 않 습 니 다.
효과 도 는 다음 과 같다.
在这里插入图片描述
발송 후 사용 하지 않 기 단 추 를 누 르 십시오
在这里插入图片描述
5 초 후 비활성화 취소,다시 발송
在这里插入图片描述
코드 는 다음 과 같 습 니 다:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>  
</head>

<body>
  <input type="text">
  <input type="button" value="  ">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    //     
    var $btn = $("input:button")
    //          
    $btn.click(function () {
      //              
      var n = 5;
      //       
      //          
      $(this).prop("disabled",true).val(n + "s      ")
      //    1s        
      //           1s      
      var timer = setInterval(() => {
        n--;
        //         
        //       this       window
        $(this).val(n + "s      ")
        //          0 ，       
        if (n <= 0) {
          clearInterval(timer)
          // 5s    ，          
          //                  
          $(this).val("    ").prop("disabled",false)
        }
      },1000)
      
    })
    
  </script>
</body>

</html>
jQuery 가 인증 코드 제어 단 추 를 보 내 는 데 사용 하지 않 는 기능 을 수행 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 jquery 제어 단 추 를 사용 하지 않 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!
Vue 3.0 핸드 돋보기 효과
Vue 패 면 반전 효과 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage