Ionic 학습 일기 인증 코드 카운트다운 실현

머리말
app 을 만 들 려 면 반드시 이 기능 과 관련 될 것 입 니 다.그래서 인터넷 에서 많은 선배 들 의 자 료 를 찾 았 습 니 다.자신 에 게 가장 적합 하고 이해 하기 쉬 운 이 기능 을 실현 하 는 것 을 찾 았 습 니 다.이 일 기 를 쓰 면 미래 에 자신 이 복습 하고 다른 사람과 공부 하 는 데 편리 합 니 다.
사고의 방향
사용자 가 등 록 했 을 때 현재 많은 앱 들 이 바 인 딩 핸드폰 번 호 를 선택 하여 등 록 했 습 니 다.이것 은 매우 좋 은 생각 입 니 다.사용자 가 조작 하기 편리 하고 실명 제 문 제 를 따 르 기 편리 합 니 다.디자인 단 추 를 누 를 때 인증 코드 를 입력 하 는 옆 에 표시 하고 사용자 가 클릭 한 후에 카운트다운 을 시작 하고 단 추 를 클릭 할 수 없 는 효과 로 바 꿔 야 합 니 다.

클릭 전

클릭 후
이 일기 에 서 는 html,ts,scss(제 페이지 이름 은 reg 이 며,자신의 구체 적 인 상황 에 따라 조정 할 수 있 습 니 다)를 포함 하여 1 페이지 아래 의 파일 만 언급 되 어 있 습 니 다.
reg.ts 에서 html 에서 얻 을 수 있 는 정 보 를 정의 합 니 다.

//      
 verifyCode: any = {
  verifyCodeTips: "     ",
  countdown: 60,
  disable: true
 }

reg.html 디자인 레이아웃
위의 그림 은 내 가 직접 디자인 한 것 인 데,여 기 는 핵심 코드 만 취한 다.

<button item-right ion-button clear (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>

이벤트 getCode()를 누 르 면[disabled]단 추 를 누 를 수 있 는 지 설정 하고 boolean 값 으로 판단 합 니 다.주로 verifyCode.verifyCodeTips,즉 텍스트 정보 와 그 후에 실현 해 야 할 카운트다운 을 표시 합 니 다.
reg.ts 추가 방법 및 카운트다운 처리
button 을 클릭 하면 getCode()방법 이 실 행 됩 니 다.이 방법 을 터치 하면 disable 의 값 을 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 인지 아 닌 지 를 판단 하고 1 이 되면 verify Code 의 3 개 정 보 를 다시 초기 화 하 는 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.