zoukankan      html  css  js  c++  java
  • ionic typescript--验证码发送倒计时功能

    1.新建页面
    ionic g page forget
     
    2.mode.html文件
    <ion-item>
    <ion-input clearInput [(ngModel)]='code' placeholder='请输入验证码'></ion-input>
    <button clear ion-button class="i" item-end (tap)="getCode()" [disabled]="!verifyCode.disable">
    {{verifyCode.verifyCodeTips}}
    </button>
    </ion-item>

    要点:[disabled]="!verifyCode.disable" 为true时才会允许点击

     

    3.demo.ts文件

    import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';


    @Component({
    selector: 'page-forget',
    templateUrl: 'forget.html',
    })
    export class ForgetPage {


    codeParam = { fromflag: 2, usertel: "130123123" } constructor( public navCtrl: NavController, public navParams: NavParams, } ionViewDidLoad() { console.log('ionViewDidLoad RegisterpasswordPage'); } // 验证码倒计时 verifyCode: any = { verifyCodeTips: "获取验证码", countdown: 60, disable: true } // 倒计时 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); } getCode() { if (this.codeParam.usertel == '') { console.debug("请填写手机号!"); return; } else{ let alert = this.alertCtrl.create({ title: '提示', subTitle: '验证码发送成功,请注意查收!', buttons: ['确定'] }); alert.present(); //发送验证码成功后开始倒计时 this.verifyCode.disable = false; this.settime(); } }

     

  • 相关阅读:
    Vue响应式原理
    vue 与 react
    vuex
    受控组件( controlled component )与不受控制的组件( uncontrolled component )区别
    redux学习语录
    Flux
    MVC和MVVM 架构模式/设计思想
    immutable
    JS中一些兼容性问题
    @芥末的糖 ---------- node连接数据库两种方式mysql和moogoDB
  • 原文地址:https://www.cnblogs.com/yc-c/p/9057455.html
Copyright © 2011-2022 走看看