Angular6 发送手机验证码按钮倒计时效果实现方法

 更新时间:2019年01月08日 09:41:49   作者:灿灿大王  
这篇文章主要介绍了Angular6 发送手机验证码按钮倒计时效果实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime):

countDown = false;
countDowmTime = 60; // 这里设置倒计时为60S
showButtonText = '发送短信验证码'; // 可以控制动态改变的按钮提示信息

2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上:

getCode(event) { 
 this.validateForm1.controls['phone'].markAsDirty();           // 点击获取验证码要以输入了手机号为前提 
 this.validateForm1.controls['phone'].updateValueAndValidity();
  this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res =>{   // 如果手机号验证通过
     if (res) { 
      this.notice.success('短信验证码已发送!');
      this.sendMessage();   // 调用下面的按钮倒计时的方法
 
        } 
       }); 
   }
 
sendMessage() {   // 发送了短信验证码后触发本方法,开始倒计时 
  this.countDown = true;                // 发送验证码后一分钟内,按钮变成不可点击状态 
  this.showButtonText = '验证码已发送(' +60+ 's)';           // 验证码发送后的初始状态 
  const start = setInterval(() = > { 
     if (this.countDownTime >=0 ) {
        this.showButtonText = '验证码已发送(' + this.countDownTime-- + 's)';     // 动态的进行倒计时
         } else { 
             clearInterval(start);             // 如果超时则重新发送 
             this.showButtonText = '重新发送'; 
             this.countDown = false;         // 按钮再次变成可点击状态
             this.countDownTime = 60; 
            } 
       }, 1000);
   }

3.页面上用方法中的变量来控制按钮的显示效果:

<div style="text-align:center"> 
   <button nz-button [disabled]="countDown" (click)="getCode($event)">{{showButtonText}}</button> 
..... 
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJS中关于ng-class指令的几种实现方式详解

    AngularJS中关于ng-class指令的几种实现方式详解

    这篇文章给大家介绍了angularJS中ng-class指令的三种实现方式,其中包括通过数据的双向绑定、通过对象数组和通过key/value这三种方式,有需要的朋友们可以参考学习,下面来一起看看吧。
    2016-09-09
  • Angular.js通过自定义指令directive实现滑块滑动效果

    Angular.js通过自定义指令directive实现滑块滑动效果

    这篇文章主要给大家介绍了关于Angular.js如何通过自定义指令directive实现滑块滑动的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angularjs具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-10-10
  • div实现自适应高度的textarea实现angular双向绑定

    div实现自适应高度的textarea实现angular双向绑定

    本文主要介绍了div实现自适应高度的textarea,实现angular双向绑定的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • angularJS提交表单(form)

    angularJS提交表单(form)

    这篇文章主要介绍了angularJS提交表单(form)的方法和示例,需要的朋友可以参考下
    2015-02-02
  • Angular.JS中指令ng-if的注意事项小结

    Angular.JS中指令ng-if的注意事项小结

    这篇文章主要给大家分享了关于Angular.JS中指令ng-if的一点注意事项,分享出来供大家参考学习,文中介绍的还是相对来说比较详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • Angular使用ng-messages与PHP进行表单数据验证

    Angular使用ng-messages与PHP进行表单数据验证

    这篇文章主要介绍了Angular使用ng-messages与PHP进行表单数据验证,ng-messages提供了更方便的表单数据验证服务,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 利用Angular7开发一个Radio组件的全过程

    利用Angular7开发一个Radio组件的全过程

    这篇文章主要给大家介绍了关于如何利用Angular7开发一个Radio组件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular7具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • angularjs实现分页和搜索功能

    angularjs实现分页和搜索功能

    这篇文章主要介绍了angularjs实现分页和搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Angular.js 实现数字转换汉字实例代码

    Angular.js 实现数字转换汉字实例代码

    这篇文章主要介绍了Angular.js 实现数字转换汉字实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 浅谈Angular 中何时取消订阅

    浅谈Angular 中何时取消订阅

    本篇文章主要介绍了浅谈Angular 中何时取消订阅,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论