ionic3 封装验证码倒计时

1. 创建 provider

$ ionic g  provider helper

最终生成结构如图

4BKCH4MYOM)34AX1F_MIGBD.png

2. 修改helper

如果要查看StorageServiceProvider类，之前有写过，请点击StorageServiceProvider

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { StorageServiceProvider } from '../storage-service/storage-service';

/*
  Generated class for the HelperProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
  常用工具类
*/
@Injectable()
export class HelperProvider {

  timeOut: Subject<number> = new Subject<number>();//倒计时观察者
  interva: any;//定时器
  constructor(
    private storage: StorageServiceProvider) {

  }

  /**
   * 启动定时器
   * @param stareTime 开始时间毫秒数 默认当前
   * @param newTime 最新时间毫秒数 默认当前
   * @param date 倒计时时间 默认60秒
   * @returns 返回Observable 剩余时间
   */

  startTime(stareTime: number = new Date().getTime(), newTime: number = new Date().getTime(), date: number = 60): Observable<number> {

    if (this.interva) {
      clearInterval(this.interva);//清除定时器
    }
    let remaining: number = Math.ceil(date - ((newTime - stareTime) / 1000));//剩余时间

    this.interva = setInterval(() => {
      if (remaining > 0) {
        remaining--;
      } else {
        clearInterval(this.interva);//清除定时器
      }
      this.timeOut.next(remaining);
    }, 1000);
    return this.timeOut.asObservable();
  }

}

3. test.ts中调用

import { StorageServiceProvider } from '../../providers/storage-service/storage-service';
export class Test{
  codeBt: string = '发送';//发送验证码按钮文字
  time;//监听
  code:string;//输入的验证码
  constructor(private storage: StorageServiceProvider) 

  ionViewDidLoad(){
    //获取记录的毫秒数 
    //无轮如何切换页面与退出程序，都将会在点击发送一分钟后才能再次发送
     let codeTime = this.storage.read('code-time');
     if (codeTime) {
       this.setTime(Number(codeTime));
     }

  /**
   * 发送按钮点击事件
   */
  onClick(){
    this.storage.write('code-time', new Date().getTime());//记录毫秒数
    this.setTime();
  }

  setTime(startTime?){
    this.time = this.helper.startTime(startTime).subscribe(number => {
      if (number <= 0) {
        this.time.unsubscribe();//取消
        this.codeBt = '发送';
      } else {
        this.codeBt = '重新发送(' + number + ')';
      }
    });
  }

  /**
   * 页面退出时时注销
   */
  ionViewDidLeave(){
     if(this.time){
      this.time.unsubscribe();//取消
    }

  }

}

test.html

<ion-item>
      <ion-label fixed>短信验证码：</ion-label>
      <ion-input ([ngModel])="code" placeholder="6位数字" clearInput></ion-input>
      <button color="light" type="button" (click)="onClick()" item-right ion-button round [disabled]="codeBt!='发送'">{{codeBt}}</button>
    </ion-item>

4. 效果

test.png

倒时结束后恢复

5GNI8%KA(LH{M%I6_0FTZ)L.png