首頁  >  文章  >  web前端  >  Ionic實作驗證碼倒數實例分享

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

小云云
小云云原創
2018-02-09 10:18:131567瀏覽

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

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

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


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

#reg.html設計佈局

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

複製程式碼 程式碼如下:


89c100c89483d2f0c8d9d3adbd28c75c{{verifyCode.verifyCodeTips}}65281c5ac262bf6d81768915a4a77ac0

點擊事件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中文網其他相關文章!

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