首頁  >  文章  >  web前端  >  Ionic實作驗證碼倒數計時

Ionic實作驗證碼倒數計時

亚连
亚连原創
2018-06-07 11:25:111575瀏覽

本篇文章主要介紹了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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn