59초 후에 문자 메시지를 받도록 jquery를 설정하는 방법

현대사회에서 휴대폰은 사람들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 휴대폰 인증 코드를 얻는 것은 다양한 비즈니스 시나리오에서 없어서는 안 될 부분이 되었습니다. 악성 등록 및 정보 유출을 방지하기 위해 많은 플랫폼에서는 사용자가 등록하거나 로그인할 때 확인하는 SMS 인증 코드를 설정합니다. 그러나 SMS 인증번호를 너무 자주 전송하면 사용자에게 불필요한 문제와 시간 낭비를 초래하게 됩니다. 인증코드 인증을 유지하면서 사용자 경험을 어떻게 향상시킬 것인가는 반드시 고려해야 할 문제가 되었습니다.

이 경우 JQuery를 사용하여 이 문제를 해결하는 것을 고려할 수 있습니다. JQuery는 핵심 디자인 철학이 "적게 작성하고 더 많이 수행"인 빠르고 간결한 JavaScript 프레임워크입니다. JQuery를 사용하면 페이지에서 동적 작업을 매우 편리하게 수행할 수 있으며 Ajax 기술을 사용하여 페이지와 서버 간의 비동기 상호 작용을 달성할 수 있습니다.

먼저 사용자가 인증 코드를 받을 수 있는 버튼을 정의해야 합니다. 사용자가 인증코드 받기 버튼을 클릭하면, 사용자가 인증코드 버튼을 반복적으로 클릭하는 것을 방지하기 위해 59초 이내에 버튼을 사용할 수 없도록 버튼 상태를 변경해야 합니다. 여기서는 Bootstrap 프레임워크의 비활성화된 버튼 스타일에서 교훈을 얻습니다. 동시에 버튼이 비활성화되면 버튼의 색상도 변경되며, 비활성화된 후에는 버튼이 회색으로 변합니다. .

HTML 코드:

<button type="button" class="btn btn-primary" id="getCodeBtn" onclick="getCode(this)">获取验证码</button>

사용자가 인증 코드 받기 버튼을 클릭하면 버튼의 상태를 변경해야 합니다. JQuery에서는 버튼의 비활성화된 속성을 설정하여 버튼을 사용할 수 없는 상태로 만들 수 있습니다. 동시에 타이머를 시작하고 타이머 메커니즘을 사용하여 버튼이 60초 후에 사용 가능한 상태로 돌아가도록 제어해야 합니다. 코드는 다음과 같습니다:

function getCode(obj) {
    var $getCodeBtn = $(obj);
    var count = 59;
    var countdown = setInterval(function() {
        $getCodeBtn.addClass("disabled");
        $getCodeBtn.css("cursor", "not-allowed");
        $getCodeBtn.text("重新发送 (" + count + ")");
        count--;
        if (count == 0) {
            clearInterval(countdown);
            $getCodeBtn.css("cursor", "pointer");
            $getCodeBtn.removeClass("disabled");
            $getCodeBtn.text("获取验证码");
        }
    }, 1000)
}

코드에서 세 개의 변수가 먼저 정의됩니다. $getCodeBtn은 인증 코드를 가져오는 버튼을 나타내고, count는 타이머의 카운트다운 초를 나타내고, countdown은 타이머의 핸들을 나타냅니다. 버튼을 클릭한 후 타이머를 트리거하고 setInterval() 함수를 통해 매초마다 익명 콜백 함수를 호출합니다. 콜백 함수에서는 먼저 버튼의 상태를 비활성화로 설정하고 버튼의 CSS 스타일을 변경하여 마우스를 비활성화했습니다. 또한 버튼 텍스트를 "재전송(카운트다운)"으로 변경하세요. 남은 초를 표시하는 동안 타이머의 콜백 함수에서 매번 카운트 값이 1씩 감소합니다. 카운트가 0으로 감소하면 타이머를 지우고 버튼 상태를 사용 가능으로 설정하고 버튼 텍스트를 "인증 코드 받기"로 변경합니다.

이러한 방식으로 인증 코드 확인에 영향을 주지 않으면서 사용자 경험을 향상시켜 사용자가 보다 편리하게 SMS 인증 코드를 받을 수 있도록 하는 동시에 사용자가 인증 코드 버튼을 반복적으로 클릭하는 것을 방지하여 빈번한 SMS 인증 코드의 필요성을 줄일 수 있습니다. 그리고 시간을 낭비했습니다.

일반적으로 JQuery와 같은 JavaScript 프레임워크를 통해 페이지 상태를 쉽게 변경하고 사용자 경험을 최적화하여 웹사이트나 앱의 사용자 경험을 향상시킬 수 있습니다.

위 내용은 59초 후에 문자 메시지를 받도록 jquery를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!