Ionic實作驗證碼倒數計時

本篇文章主要介紹了Ionic學習日記實現驗證碼倒數計時，現在分享給大家，也給大家做個參考。

前言

要做一個app的話，肯定會涉及到這個功能，所以就從網上找了許多前輩的資料，找到了一個最適合自己並且方便理解的實現此功能，寫此日記方便未來自己複習和其他人學習

思路

在用戶註冊的時候，時下不少app都選擇了綁定手機號註冊，這是一個非常好的想法，便捷用戶操作，也很方便遵循實名制的問題，在設計按鈕的時候，需要讓他顯示在輸入驗證碼的旁邊，並在用戶點擊後，開始倒數計時，並將按鈕變成無法點選效果

點擊前

點擊後

#在本日記中只涉及到1個page下的文件，包括html、ts和scss（我的頁面名為reg，可根據自己的具體情況進行調整）

在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後就將verifyCode的3個資訊重新初始化

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

利用SpringMVC解決vue跨域請求

#Vue元件和Route的生命週期（詳細教學）

在Vue2.0中實作使用者權限控制######

以上是Ionic實作驗證碼倒數計時的詳細內容。更多資訊請關注PHP中文網其他相關文章！