인증 코드 카운트다운 예시 공유의 이온적 구현

사용자가 등록할 때 많은 앱이 등록을 위해 휴대폰 번호를 결합하는 방식을 선택합니다. 이는 사용자가 조작하기 편리하고 버튼을 디자인할 때에도 매우 편리합니다. 인증 코드 입력 옆에 표시되어야 하며 사용자가 클릭한 후 카운트다운을 시작하고 버튼을 클릭할 수 없는 효과로 바꿉니다. 이번 글에서는 아이오닉 학습일지의 인증코드 카운트다운 구현을 주로 소개하겠습니다.

이 일기에는 html, ts 및 scss를 포함하여 1페이지 미만의 파일만 포함됩니다. (내 페이지 이름은 reg이며 특정 상황에 따라 조정될 수 있습니다.)

reg.ts는 html에 정의되어 있습니다. 얻을 수 있는 정보

//验证码倒计时
 verifyCode: any = {
  verifyCodeTips: "获取验证码",
  countdown: 60,
  disable: true
 }

reg.html 디자인 레이아웃

위 사진은 제가 디자인한 것입니다. 여기서는 키코드만 찍었습니다.

코드 복사 코드는 다음과 같습니다.

b1a7fdb575ad38600e455209e1029518{{verifyCode.verifyCodeTips}}65281c5ac262bf6d81768915a4a77ac0

Click 이벤트 getCode(), 설정 [ 비활성화됨] 버튼을 클릭할 수 있는지 여부는 부울 값으로 판단됩니다. 주요 표시 내용은 나중에 구현해야 하는 텍스트 정보와 카운트다운인 verifyCode.verifyCodeTips입니다.

reg.ts에서는 메서드와 카운트다운 처리를 추가합니다.

버튼을 클릭하면 트리거됩니다. getCode() 메서드를 트리거한 후 먼저 비활성화 값을 false로 변경하고 버튼을 클릭할 수 없도록 설정한 다음 settime 메서드를 트리거합니다

 getCode() {
  //点击按钮后开始倒计时
  this.verifyCode.disable = false;
  this.settime();
 }

settime()을 사용하여 카운트다운 기능을 구체적으로 구현합니다

//倒计时
 settime() {
  if (this.verifyCode.countdown == 1) {
   this.verifyCode.countdown = 60;
   this.verifyCode.verifyCodeTips = "获取验证码";
   this.verifyCode.disable = true;
   return;
  } else {
   this.verifyCode.countdown--;
  }
  this.verifyCode.verifyCodeTips = "重新获取"+this.verifyCode.countdown+"秒";
  setTimeout(() => {
   this.verifyCode.verifyCodeTips = "重新获取"+this.verifyCode.countdown+"秒";
   this.settime();
  }, 1000);
 }

각각 1초 후에 1씩 감소하는 간단한 카운트다운 기능입니다. 1이면 verifyCode 정보 3개를 다시 초기화

휴대전화 등록 및 인증코드 전송 카운트다운을 간단하게 구현하는 방법

Angular.js를 사용하여 인증코드 카운트다운 60초 버튼 방식

휴대폰 등록 시 인증번호 카운트다운 기능 발송

위 내용은 인증 코드 카운트다운 예시 공유의 이온적 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!