Ionic實作驗證碼倒數實例分享

在用戶註冊的時候，時下不少app都選擇了綁定手機號碼註冊，這是一個非常好的想法，便捷用戶操作，也很方便遵循實名制的問題，在設計按鈕的時候，需要讓他顯示在輸入驗證碼的旁邊，並在使用者點擊後，開始倒數計時，並將按鈕變成無法點擊效果。本文主要和大家介紹了Ionic學習日記實現驗證碼倒數計時，希望能幫助大家。

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

#在reg.ts定義在html中可以取得到的資訊

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

#reg.html設計佈局

上面的圖片是我自己設計的，這裡只取關鍵程式碼

複製程式碼 程式碼如下：

{{verifyCode.verifyCodeTips}}

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

手機註冊發送驗證碼倒數計時簡單實作方法

##使用Angular.js取得驗證碼倒數計時60秒按鈕方法

手機註冊時發送驗證碼倒數功能

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