Ionic學習日記實現驗證碼倒計時，ionic驗證碼

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個資訊重新初始化

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。