快捷導(dǎo)航

Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)

更新時(shí)間：2018年02月08日 09:12:36 作者：SWKende

本篇文章主要介紹了Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

要做一個(gè)app的話，肯定會涉及到這個(gè)功能，所以就從網(wǎng)上找了許多前輩的資料，找到了一個(gè)最適合自己并且方便理解的實(shí)現(xiàn)此功能，寫此日記方便未來自己復(fù)習(xí)和其他人學(xué)習(xí)

思路

在用戶注冊的時(shí)候，時(shí)下不少app都選擇了綁定手機(jī)號注冊，這是一個(gè)非常好的想法，便捷用戶操作，也很方便遵循實(shí)名制的問題，在設(shè)計(jì)按鈕的時(shí)候，需要讓他顯示在輸入驗(yàn)證碼的旁邊，并在用戶點(diǎn)擊后，開始倒計(jì)時(shí)，并將按鈕變成無法點(diǎn)擊效果

點(diǎn)擊前

點(diǎn)擊后

在本篇日記中只涉及到1個(gè)page下的文件，包括html、ts和scss（我的頁面名為reg，可根據(jù)自己的具體情況進(jìn)行調(diào)整）

在reg.ts定義在html中可以獲取到的信息

//驗(yàn)證碼倒計(jì)時(shí)
 verifyCode: any = {
  verifyCodeTips: "獲取驗(yàn)證碼",
  countdown: 60,
  disable: true
 }

reg.html設(shè)計(jì)布局

上面的圖片是我自己設(shè)計(jì)的，這里只取關(guān)鍵代碼

復(fù)制代碼代碼如下:

<button item-right ion-button clear (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>

點(diǎn)擊事件getCode()，設(shè)置[disabled]是否可以點(diǎn)擊按鈕，用boolean值判斷，主要顯示的內(nèi)容是verifyCode.verifyCodeTips，即文本信息和之后需要實(shí)現(xiàn)的倒計(jì)時(shí)

reg.ts添加方法和倒計(jì)時(shí)處理

當(dāng)點(diǎn)擊button后將觸發(fā)getCode()方法，觸發(fā)該方法后首先將disable的值改變?yōu)閒alse，將按鈕設(shè)為不可點(diǎn)擊，然后觸發(fā)settime方法

 getCode() {
  //點(diǎn)擊按鈕后開始倒計(jì)時(shí)
  this.verifyCode.disable = false;
  this.settime();
 }

settime()具體實(shí)現(xiàn)倒計(jì)時(shí)功能

//倒計(jì)時(shí)
 settime() {
  if (this.verifyCode.countdown == 1) {
   this.verifyCode.countdown = 60;
   this.verifyCode.verifyCodeTips = "獲取驗(yàn)證碼";
   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秒計(jì)數(shù)器減1，簡單的倒計(jì)時(shí)功能，重要的是判斷計(jì)數(shù)器是否為1，當(dāng)為1后就將verifyCode的3個(gè)信息重新初始化

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: