1. 創(chuàng)建 provider

$ ionic g  provider helper

最終生成結(jié)構(gòu)如圖

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 開始時間毫秒數(shù) 默認當前
   * @param newTime 最新時間毫秒數(shù) 默認當前
   * @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中調(diào)用

import { StorageServiceProvider } from '../../providers/storage-service/storage-service';
export class Test{
  codeBt: string = '發(fā)送';//發(fā)送驗證碼按鈕文字
  time;//監(jiān)聽
  code:string;//輸入的驗證碼
  constructor(private storage: StorageServiceProvider) 

  ionViewDidLoad(){
    //獲取記錄的毫秒數(shù) 
    //無輪如何切換頁面與退出程序，都將會在點擊發(fā)送一分鐘后才能再次發(fā)送
     let codeTime = this.storage.read('code-time');
     if (codeTime) {
       this.setTime(Number(codeTime));
     }

  /**
   * 發(fā)送按鈕點擊事件
   */
  onClick(){
    this.storage.write('code-time', new Date().getTime());//記錄毫秒數(shù)
    this.setTime();
  }

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

  /**
   * 頁面退出時時注銷
   */
  ionViewDidLeave(){
     if(this.time){
      this.time.unsubscribe();//取消
    }

  }

}

test.html

<ion-item>
      <ion-label fixed>短信驗證碼：</ion-label>
      <ion-input ([ngModel])="code" placeholder="6位數(shù)字" clearInput></ion-input>
      <button color="light" type="button" (click)="onClick()" item-right ion-button round [disabled]="codeBt!='發(fā)送'">{{codeBt}}</button>
    </ion-item>

4. 效果

test.png

倒時結(jié)束后恢復

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